/* ============================================================
   tokens.base.css  —  四主题共享基础契约 (Base Contract)
   版本: S1-Pro v1 · 2026-04-18
   依赖: 无
   加载顺序: 必须最先加载，随后由 themes/theme-{N}.tokens.css 覆盖差异值

   结构 (厚契约 · 一次建满):
     §1  主色系 (T1 Teal Stone 默认值)
     §2  点缀色
     §3  语义色 (state)
     §4  品牌第三方固定色 (不随主题覆盖)
     §5  文本层 (扩展: on-primary/on-accent/on-dark 全家族)
     §6  背景层 (含 header/footer/section/hero 背景)
     §7  边框层
     §8  Alpha 透明色 (white/black)
     §9  Overlay 遮罩/阴影源
     §10 渐变系统 (primary/tech/dark/hero-radial/cta)
     §11 玻璃拟态
     §12 间距
     §13 字体 (family/size/weight/line/tracking)
     §14 圆角
     §15 阴影 (scale + glow + card + focus + inset)
     §16 过渡动效
     §17 布局/容器/Z-Index/宽高比/图标
     §18 预设阴影 (R14: float/dropdown/popup/mobile-bar/card-hover)
     §19 ★ 跨组件语义层 (S1-Pro 新增) — Hero/Badge/Tag/Chip/Price-tag/
         CTA/Alert/Card/Panel/Input 全家族
     §20 响应式覆盖
     §21 兼容别名层 (B2 旧命名 → 真 token 桥接)

   命名约定:
     --color-text-*       纯文本前景
     --color-text-on-*    指定背景上的前景 (primary/accent/dark/success ...)
     --color-bg-*         纯背景
     --color-border-*     边框
     --overlay-*-{N}      半透明源 (供 shadow/glass 引用)
     --{component}-*      跨组件语义 (hero/badge/cta/price-tag/...)
   ============================================================ */

:root {
  /* ===========================================
     §1 主色系 · Teal Stone (深邃墨绿)
     =========================================== */
  --color-primary: #0d9488;
  --color-primary-hover: #0f766e;
  --color-primary-active: #115e59;
  --color-primary-tint: #14b8a6;
  --color-primary-light: #e6f7f5;
  --color-primary-lighter: #f0fdf9;
  --color-primary-dark: #134e4a;

  /* ===========================================
     §2 点缀色 · 金铜暖调
     =========================================== */
  --color-secondary: #57534e;
  --color-secondary-hover: #44403c;
  --color-secondary-light: #f5f5f4;
  --color-accent: #d97706;
  --color-accent-hover: #b45309;
  --color-accent-light: #fef3e2;
  --color-accent-secondary: #0891b2;
  --color-accent-secondary-light: #e6f7fa;

  /* ===========================================
     §3 语义色 (state)
     =========================================== */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-light: #d1fae5;
  --color-success-lighter: #ecfdf5;
  --color-success-dark: #047857;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: #fef3c7;
  --color-warning-lighter: #fffbeb;
  --color-warning-dark: #b45309;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-light: #fee2e2;
  --color-danger-lighter: #fef2f2;
  --color-danger-dark: #b91c1c;
  --color-info: #0891b2;
  --color-info-hover: #0e7490;
  --color-info-light: #cffafe;
  --color-info-lighter: #ecfeff;
  --color-info-dark: #155e75;

  /* ===========================================
     §4 品牌第三方固定色 (不随主题覆盖)
     =========================================== */
  --color-brand-wechat: #07c160;
  --color-brand-wechat-hover: #06ae56;
  --overlay-brand-wechat-30: rgba(7, 193, 96, 0.3);

  /* ===========================================
     §5 文本层 (13 tokens + on-* 全家族)
     — 基础文本 —
     =========================================== */
  --color-text: #1c1917;
  --color-text-secondary: #57534e;
  --color-text-muted: #a8a29e;
  --color-text-placeholder: #d6d3d1;
  --color-text-disabled: #d6d3d1;

  --color-text-inverse: #fafaf9;
  --color-text-inverse-secondary: rgba(250, 250, 249, 0.7);
  --color-text-inverse-muted: rgba(250, 250, 249, 0.5);

  --color-text-on-primary: var(--color-text-inverse);
  --color-text-on-primary-secondary: rgba(250, 250, 249, 0.75);
  --color-text-on-accent: var(--color-text-inverse);
  --color-text-on-success: var(--color-text-inverse);
  --color-text-on-danger: var(--color-text-inverse);
  --color-text-on-warning: #1c1917;
  --color-text-on-dark: var(--color-text-inverse);
  --color-text-on-dark-secondary: var(--color-text-inverse-secondary);
  --color-text-on-dark-muted: var(--color-text-inverse-muted);

  --color-text-link: var(--color-primary);
  --color-text-link-hover: var(--color-primary-hover);

  /* ===========================================
     §6 背景层 (含 header/footer/section/hero)
     =========================================== */
  --color-bg: #fafaf9;
  --color-bg-primary: var(--color-bg);
  --color-bg-secondary: #f5f5f4;
  --color-bg-tertiary: #e7e5e4;
  --color-bg-quaternary: #d6d3d1;
  --color-bg-dark: #1c1917;
  --color-bg-darker: #0c0a09;
  --color-bg-darkest: #040302;

  --color-header-bg: var(--color-bg);
  --color-footer-bg: var(--color-bg-dark);
  --color-footer-text: var(--color-text-inverse);

  --color-bg-section: var(--color-bg);
  --color-bg-section-alt: var(--color-bg-secondary);
  --color-bg-overlay: rgba(28, 25, 23, 0.6);

  /* ===========================================
     §7 边框层
     =========================================== */
  --color-border: #e7e5e4;
  --color-border-light: #f5f5f4;
  --color-border-dark: #d6d3d1;
  --color-border-focus: #0d9488;
  --color-border-hero: rgba(250, 250, 249, 0.12);
  --color-border-card-hover: var(--color-primary);

  --color-overlay: rgba(28, 25, 23, 0.6);
  --color-overlay-light: rgba(28, 25, 23, 0.3);

  --color-border-glow: rgba(250, 250, 249, 0.08);
  --color-border-glow-hover: rgba(250, 250, 249, 0.15);
  --color-border-glow-primary: rgba(13, 148, 136, 0.3);

  /* ===========================================
     §8 Alpha 透明色
     =========================================== */
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-black-5: rgba(0, 0, 0, 0.05);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-60: rgba(0, 0, 0, 0.6);

  /* ===========================================
     §9 Overlay 遮罩/阴影源 (R14)
     =========================================== */
  --overlay-black-05: rgba(0, 0, 0, 0.05);
  --overlay-black-08: rgba(0, 0, 0, 0.08);
  --overlay-black-10: rgba(0, 0, 0, 0.1);
  --overlay-black-25: rgba(0, 0, 0, 0.25);
  --overlay-black-50: rgba(0, 0, 0, 0.5);
  --overlay-black-60: rgba(0, 0, 0, 0.6);
  --overlay-black-70: rgba(0, 0, 0, 0.7);

  --overlay-white-05: rgba(255, 255, 255, 0.05);
  --overlay-white-10: rgba(255, 255, 255, 0.1);
  --overlay-white-15: rgba(255, 255, 255, 0.15);
  --overlay-white-40: rgba(255, 255, 255, 0.4);
  --overlay-white-50: rgba(255, 255, 255, 0.5);
  --overlay-white-60: rgba(255, 255, 255, 0.6);
  --overlay-white-65: rgba(255, 255, 255, 0.65);
  --overlay-white-85: rgba(255, 255, 255, 0.85);
  --overlay-white-90: rgba(255, 255, 255, 0.9);

  --overlay-primary-10: rgba(13, 148, 136, 0.1);
  --overlay-primary-15: rgba(13, 148, 136, 0.15);
  --overlay-primary-20: rgba(13, 148, 136, 0.2);
  --overlay-primary-30: rgba(13, 148, 136, 0.3);
  --overlay-primary-40: rgba(13, 148, 136, 0.4);
  --overlay-primary-50: rgba(13, 148, 136, 0.5);

  --overlay-accent-10: rgba(217, 119, 6, 0.1);
  --overlay-accent-15: rgba(217, 119, 6, 0.15);
  --overlay-accent-25: rgba(217, 119, 6, 0.25);

  --overlay-text-06: rgba(28, 25, 23, 0.06);
  --overlay-text-08: rgba(28, 25, 23, 0.08);
  --overlay-text-10: rgba(28, 25, 23, 0.1);

  --border-light-80: rgba(231, 229, 228, 0.8);

  /* ===========================================
     §10 渐变系统
     =========================================== */
  --color-gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --color-gradient-primary-shine: linear-gradient(135deg, var(--color-primary-tint) 0%, var(--color-primary) 40%, var(--color-primary-hover) 100%);
  --color-gradient-tech: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-secondary) 100%);
  --color-gradient-dark: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%);

  --color-gradient-radial:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(13, 148, 136, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(217, 119, 6, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(8, 145, 178, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%);

  --color-gradient-cta:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(13, 148, 136, 0.2) 0%, transparent 50%),
    linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%);

  /* ===========================================
     §11 玻璃拟态
     =========================================== */
  --glass-bg: rgba(250, 250, 249, 0.7);
  --glass-bg-light: rgba(250, 250, 249, 0.85);
  --glass-bg-dark: rgba(28, 25, 23, 0.8);
  --glass-border: rgba(250, 250, 249, 0.2);
  --glass-border-dark: rgba(250, 250, 249, 0.08);
  --glass-blur: 20px;

  /* ===========================================
     §12 间距
     =========================================== */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* ===========================================
     §13 字体
     =========================================== */
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;

  /* ===========================================
     §14 圆角
     =========================================== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ===========================================
     §15 阴影
     =========================================== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 2px 4px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.1), 0 4px 8px rgba(28, 25, 23, 0.06);
  --shadow-xl: 0 24px 48px rgba(28, 25, 23, 0.14), 0 8px 16px rgba(28, 25, 23, 0.08);
  --shadow-2xl: 0 32px 64px rgba(28, 25, 23, 0.18);
  --shadow-inner: inset 0 2px 4px rgba(28, 25, 23, 0.05);

  --shadow-glow-primary: 0 8px 32px rgba(13, 148, 136, 0.25), 0 4px 12px rgba(13, 148, 136, 0.15);
  --shadow-glow-accent: 0 8px 32px var(--overlay-accent-25), 0 4px 12px var(--overlay-accent-15);
  --shadow-glow-white: 0 0 20px rgba(250, 250, 249, 0.1);

  --shadow-card: 0 4px 16px rgba(28, 25, 23, 0.06);

  --shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.15);
  --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.15);

  --inset-glow: inset 0 1px 0 rgba(250, 250, 249, 0.1);
  --inset-glow-strong: inset 0 1px 0 rgba(250, 250, 249, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.05);

  /* ===========================================
     §16 过渡动效
     =========================================== */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --easing-linear: linear;
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===========================================
     §17 布局/容器/Z-Index/宽高比/图标
     =========================================== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  --header-height: 64px;

  --z-hide: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 250;
  --z-sticky-header: 260;
  --z-fixed: 300;
  --z-drawer: 350;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;
  --z-tooltip: 800;

  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-card: 3 / 2;
  --aspect-product: 6 / 7;

  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 48px;
  --icon-xxl: 64px;

  /* ===========================================
     §18 预设阴影 (R14)
     =========================================== */
  --shadow-float: 0 4px 12px var(--overlay-text-10), 0 2px 4px var(--overlay-text-06);
  --shadow-dropdown: 0 4px 20px var(--overlay-black-10), 0 2px 6px var(--overlay-black-05);
  --shadow-popup: 0 25px 50px -12px var(--overlay-black-25);
  --shadow-mobile-bar: 0 -2px 10px var(--overlay-black-08);
  --shadow-card-hover: 0 4px 20px var(--overlay-primary-10);

  /* ============================================================
     §19 ★ 跨组件语义层 (S1-Pro 新增)

     原则:
       (1) 所有跨组件复用色都在此处定义一次，组件 CSS 只消费本层；
       (2) 默认值尽量 var() 指向 §1~§10 的基础层，主题切换时自动联动；
       (3) 需要解耦的点（T2 深色特殊处理、badge 需要 near-white 前景等）
           在 theme-{N}.tokens.css 中单独覆盖；
       (4) 命名规则: --{component}-{slot}[-state]
           slot ∈ { bg, text, border, shadow, icon }
           state ∈ { hover, active, disabled, focus }
     ============================================================ */

  --hero-bg: var(--color-gradient-radial);
  --hero-bg-solid: var(--color-bg-dark);
  --hero-text: var(--color-text-on-dark);
  --hero-text-secondary: var(--color-text-on-dark-secondary);
  --hero-text-muted: var(--color-text-on-dark-muted);
  --hero-accent-bar-bg: var(--color-primary-tint);
  --hero-tip-bg: var(--overlay-white-10);
  --hero-tip-text: var(--color-text-on-dark);
  --hero-tip-border: var(--overlay-white-15);
  --hero-badge-bg: var(--overlay-primary-20);
  --hero-badge-text: var(--color-text-on-dark);
  --hero-badge-border: var(--overlay-primary-30);
  --hero-trust-num-text: var(--color-text-on-dark);
  --hero-trust-label-text: var(--color-text-on-dark-secondary);
  --hero-divider: var(--color-border-hero);

  --badge-primary-bg: var(--color-primary);
  --badge-primary-text: var(--color-text-on-primary);
  --badge-primary-border: transparent;
  --badge-accent-bg: var(--color-accent);
  --badge-accent-text: var(--color-text-on-accent);
  --badge-accent-border: transparent;
  --badge-success-bg: var(--color-success);
  --badge-success-text: var(--color-text-on-success);
  --badge-warning-bg: var(--color-warning);
  --badge-warning-text: var(--color-text-on-warning);
  --badge-danger-bg: var(--color-danger);
  --badge-danger-text: var(--color-text-on-danger);
  --badge-neutral-bg: var(--color-bg-secondary);
  --badge-neutral-text: var(--color-text-secondary);
  --badge-neutral-border: var(--color-border);

  --badge-hero-bg: var(--overlay-primary-20);
  --badge-hero-text: var(--color-text-on-dark);
  --badge-hero-border: var(--overlay-primary-30);

  --tag-bg: var(--color-bg-secondary);
  --tag-text: var(--color-text-secondary);
  --tag-border: var(--color-border);
  --tag-hover-bg: var(--color-primary-light);
  --tag-hover-text: var(--color-primary);
  --tag-active-bg: var(--color-primary);
  --tag-active-text: var(--color-text-on-primary);

  --chip-bg: var(--color-bg-secondary);
  --chip-text: var(--color-text);
  --chip-border: var(--color-border);
  --chip-close-icon: var(--color-text-muted);

  --price-tag-bg: var(--color-gradient-primary);
  --price-tag-text: var(--color-text-on-primary);
  --price-tag-border: transparent;
  --price-tag-shadow: var(--shadow-glow-primary);

  --cta-primary-bg: var(--color-primary);
  --cta-primary-text: var(--color-text-on-primary);
  --cta-primary-border: transparent;
  --cta-primary-hover-bg: var(--color-primary-hover);
  --cta-primary-active-bg: var(--color-primary-active);
  --cta-primary-shadow: var(--shadow-glow-primary);

  --cta-secondary-bg: transparent;
  --cta-secondary-text: var(--color-primary);
  --cta-secondary-border: var(--color-primary);
  --cta-secondary-hover-bg: var(--color-primary-light);
  --cta-secondary-hover-text: var(--color-primary-hover);

  --cta-tertiary-bg: transparent;
  --cta-tertiary-text: var(--color-text);
  --cta-tertiary-hover-bg: var(--color-bg-secondary);

  --cta-on-dark-primary-bg: var(--color-primary);
  --cta-on-dark-primary-text: var(--color-text-on-primary);
  --cta-on-dark-secondary-bg: var(--overlay-white-10);
  --cta-on-dark-secondary-text: var(--color-text-on-dark);
  --cta-on-dark-secondary-border: var(--overlay-white-15);
  --cta-on-dark-secondary-hover-bg: var(--overlay-white-15);

  --alert-info-bg: var(--color-info-lighter);
  --alert-info-text: var(--color-info-dark);
  --alert-info-border: var(--color-info-light);
  --alert-info-icon: var(--color-info);
  --alert-success-bg: var(--color-success-lighter);
  --alert-success-text: var(--color-success-dark);
  --alert-success-border: var(--color-success-light);
  --alert-success-icon: var(--color-success);
  --alert-warning-bg: var(--color-warning-lighter);
  --alert-warning-text: var(--color-warning-dark);
  --alert-warning-border: var(--color-warning-light);
  --alert-warning-icon: var(--color-warning);
  --alert-danger-bg: var(--color-danger-lighter);
  --alert-danger-text: var(--color-danger-dark);
  --alert-danger-border: var(--color-danger-light);
  --alert-danger-icon: var(--color-danger);

  --card-bg: var(--color-bg);
  --card-bg-elevated: #ffffff;
  --card-border: var(--color-border);
  --card-border-hover: var(--color-primary);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);
  --card-text: var(--color-text);
  --card-text-secondary: var(--color-text-secondary);

  --panel-bg: var(--color-bg-section);
  --panel-bg-alt: var(--color-bg-section-alt);
  --panel-bg-accent: var(--color-primary-lighter);
  --panel-border: var(--color-border);
  --panel-text: var(--color-text);

  --input-bg: var(--color-bg);
  --input-text: var(--color-text);
  --input-placeholder: var(--color-text-placeholder);
  --input-border: var(--color-border);
  --input-border-hover: var(--color-border-dark);
  --input-border-focus: var(--color-border-focus);
  --input-shadow-focus: var(--shadow-focus);
  --input-disabled-bg: var(--color-bg-secondary);
  --input-disabled-text: var(--color-text-disabled);
  --label-text: var(--color-text);
  --help-text: var(--color-text-secondary);
  --error-text: var(--color-danger);
}

/* ============================================================
   §20 响应式覆盖
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --header-height: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 72px;
  }
}

/* ============================================================
   §21 兼容别名层 (B2 · A 类安全桥接)
   说明:
     - 仅建立 "旧命名 → 真命名" 的 var() 指向
     - 不新增任何主题覆盖、不改变任何既有值
     - 所有别名在 4 个主题下均随目标 token 联动
   ============================================================ */
:root {

  --font-size-base: var(--font-size-md);
  --text-xs:   var(--font-size-xs);
  --text-sm:   var(--font-size-sm);
  --text-base: var(--font-size-md);
  --text-lg:   var(--font-size-lg);
  --text-xl:   var(--font-size-xl);
  --text-2xl:  var(--font-size-2xl);

  --leading-relaxed: var(--line-height-relaxed);

  --space-xs:  var(--space-1);
  --space-sm:  var(--space-2);
  --space-md:  var(--space-4);
  --space-lg:  var(--space-6);
  --space-xl:  var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  --color-bg-card:       var(--color-bg-secondary);
  --color-text-primary:  var(--color-text);
  --color-text-tertiary: var(--color-text-muted);
  --color-muted:         var(--color-text-muted);

  --focus-ring:        var(--shadow-focus);
  --focus-ring-color:  var(--color-border-focus);
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;

  --transition: var(--transition-base);

  --card-radius: var(--radius-xl);
}