/* ============================================================================
 * WLTT Design Tokens · 设计令牌层
 * ----------------------------------------------------------------------------
 * 唯一真源：所有颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效 均在此定义。
 * 规则：业务样式禁止出现裸值（hard-coded value），一律 var(--*) 引用。
 * 色彩空间：OKLCH（感知均匀，明度可预测，渐变不脏）。
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * 1. 原语层 Primitive · 色相与明度阶梯
 * 色相环选型（刻意避开 AI 惯性配色）：
 *   主色  H=248  靛青蓝（理性、可信任，非电光紫）
 *   辅色  H=196  天青（水汽/远行感，低饱和使用）
 *   强调  H=68   暖金（决定性瞬间：下单/成行，仅用于 ≤3% 面积）
 *   语义  H=25 红 / H=150 绿 / H=85 琥珀
 * -------------------------------------------------------------------------*/
:root {
  /* --- 中性阶梯：微冷灰（H=248, C=0.006），避免死灰 --------------------- */
  --wltt-gray-0:   oklch(99.2% 0.002 248);
  --wltt-gray-25:  oklch(98.1% 0.003 248);
  --wltt-gray-50:  oklch(96.6% 0.004 248);
  --wltt-gray-100: oklch(94.2% 0.005 248);
  --wltt-gray-200: oklch(90.1% 0.006 248);
  --wltt-gray-300: oklch(84.3% 0.007 248);
  --wltt-gray-400: oklch(72.6% 0.009 248);
  --wltt-gray-500: oklch(61.2% 0.011 248);
  --wltt-gray-600: oklch(50.4% 0.012 248);
  --wltt-gray-700: oklch(40.1% 0.013 248);
  --wltt-gray-800: oklch(29.6% 0.013 248);
  --wltt-gray-850: oklch(24.3% 0.012 248);
  --wltt-gray-900: oklch(19.8% 0.011 248);
  --wltt-gray-950: oklch(14.6% 0.010 248);
  --wltt-gray-1000:oklch(10.2% 0.009 248);

  /* --- 主色阶梯：靛青蓝 H=248 ------------------------------------------ */
  --wltt-primary-50:  oklch(96.8% 0.018 248);
  --wltt-primary-100: oklch(93.4% 0.036 248);
  --wltt-primary-200: oklch(88.2% 0.062 248);
  --wltt-primary-300: oklch(81.6% 0.092 248);
  --wltt-primary-400: oklch(73.4% 0.121 248);
  --wltt-primary-500: oklch(64.1% 0.148 248);
  --wltt-primary-600: oklch(55.3% 0.151 248);
  --wltt-primary-700: oklch(46.2% 0.135 248);
  --wltt-primary-800: oklch(37.4% 0.108 248);
  --wltt-primary-900: oklch(29.8% 0.081 248);

  /* --- 辅色阶梯：天青 H=196 ------------------------------------------- */
  --wltt-accent-50:  oklch(96.5% 0.022 196);
  --wltt-accent-100: oklch(92.8% 0.044 196);
  --wltt-accent-200: oklch(87.1% 0.072 196);
  --wltt-accent-300: oklch(80.2% 0.094 196);
  --wltt-accent-400: oklch(72.8% 0.107 196);
  --wltt-accent-500: oklch(65.4% 0.108 196);
  --wltt-accent-600: oklch(57.1% 0.100 196);
  --wltt-accent-700: oklch(47.9% 0.087 196);

  /* --- 强调色：暖金 H=68（<3% 面积，仅用于成行/支付） ------------------- */
  --wltt-gold-100: oklch(95.4% 0.042 78);
  --wltt-gold-300: oklch(86.2% 0.098 74);
  --wltt-gold-500: oklch(76.8% 0.142 68);
  --wltt-gold-600: oklch(68.4% 0.141 62);
  --wltt-gold-700: oklch(57.6% 0.126 56);

  /* --- 语义色 --------------------------------------------------------- */
  --wltt-danger-50:  oklch(96.1% 0.018 25);
  --wltt-danger-300: oklch(78.2% 0.104 30);
  --wltt-danger-500: oklch(60.4% 0.196 25);
  --wltt-danger-600: oklch(52.1% 0.183 25);
  --wltt-danger-700: oklch(43.8% 0.158 25);

  --wltt-success-50:  oklch(96.4% 0.021 150);
  --wltt-success-300: oklch(79.6% 0.108 150);
  --wltt-success-500: oklch(62.8% 0.138 150);
  --wltt-success-600: oklch(54.2% 0.124 150);
  --wltt-success-700: oklch(45.4% 0.112 150);
  --wltt-success-800: oklch(37.4% 0.090 150);

  --wltt-warn-50:  oklch(96.9% 0.030 85);
  --wltt-warn-300: oklch(84.1% 0.098 85);
  --wltt-warn-500: oklch(74.6% 0.142 80);
  --wltt-warn-600: oklch(65.8% 0.135 76);
  --wltt-warn-700: oklch(55.1% 0.119 72);
  --wltt-warn-800: oklch(45.6% 0.098 70);

  --wltt-info-50:  oklch(96.6% 0.020 248);
  --wltt-info-500: oklch(64.1% 0.148 248);

  /* --- 数据可视化色序（八维，感知等距） ------------------------------- */
  --wltt-viz-1: oklch(64.1% 0.148 248);
  --wltt-viz-2: oklch(65.4% 0.108 196);
  --wltt-viz-3: oklch(76.8% 0.142 68);
  --wltt-viz-4: oklch(62.8% 0.138 150);
  --wltt-viz-5: oklch(66.2% 0.152 320);
  --wltt-viz-6: oklch(70.4% 0.128 40);
  --wltt-viz-7: oklch(58.6% 0.096 265);
  --wltt-viz-8: oklch(72.1% 0.106 145);
}

/* ---------------------------------------------------------------------------
 * 2. 语义层 Semantic · 浅色模式（默认）
 * 说明：浅色不是深色的反转，而是独立设计——浅色用低饱和面色 + 细描边，
 *       深色用高饱和微光 + 低对比边界。
 * -------------------------------------------------------------------------*/
:root {
  /* 表面 */
  --wltt-surface-base:      var(--wltt-gray-25);
  --wltt-surface-raised:    var(--wltt-gray-0);
  --wltt-surface-sunken:    var(--wltt-gray-50);
  --wltt-surface-overlay:   oklch(99.2% 0.002 248 / 0.86);
  --wltt-surface-brand:     var(--wltt-primary-700);
  --wltt-surface-brand-hover:var(--wltt-primary-800);
  --wltt-surface-brand-soft:var(--wltt-primary-50);
  --wltt-surface-inverse:   var(--wltt-gray-900);

  /* 文本：AA 为基线约束 —— secondary ≥ 7:1、tertiary ≥ 4.5:1（12px 亦达标） */
  --wltt-text-primary:   var(--wltt-gray-900);
  --wltt-text-secondary: var(--wltt-gray-700);
  --wltt-text-tertiary:  var(--wltt-gray-600);
  --wltt-text-disabled:  var(--wltt-gray-400);
  --wltt-text-inverse:   var(--wltt-gray-0);
  --wltt-text-brand:     var(--wltt-primary-700);
  --wltt-text-on-brand:  oklch(99.4% 0.004 248);
  --wltt-text-danger:    var(--wltt-danger-700);
  --wltt-text-success:   var(--wltt-success-800);
  --wltt-text-warn:      var(--wltt-warn-800);

  /* 边界 */
  --wltt-border-subtle:  var(--wltt-gray-100);
  --wltt-border-default: var(--wltt-gray-200);
  --wltt-border-strong:  var(--wltt-gray-300);
  --wltt-border-brand:   var(--wltt-primary-400);
  --wltt-border-focus:   var(--wltt-primary-500);

  /* 交互填充 */
  --wltt-fill-hover:    oklch(19.8% 0.011 248 / 0.045);
  --wltt-fill-active:   oklch(19.8% 0.011 248 / 0.085);
  --wltt-fill-selected: var(--wltt-primary-50);

  /* 状态面色 */
  --wltt-state-danger-bg:  var(--wltt-danger-50);
  --wltt-state-success-bg: var(--wltt-success-50);
  --wltt-state-warn-bg:    var(--wltt-warn-50);
  --wltt-state-info-bg:    var(--wltt-info-50);

  /* 阴影：多层叠加（近距接触影 + 远距扩散影），单层阴影是廉价感主源 */
  --wltt-shadow-xs:
    0 1px 2px oklch(19.8% 0.011 248 / 0.05);
  --wltt-shadow-sm:
    0 1px 2px oklch(19.8% 0.011 248 / 0.05),
    0 2px 6px -1px oklch(19.8% 0.011 248 / 0.06);
  --wltt-shadow-md:
    0 2px 4px -1px oklch(19.8% 0.011 248 / 0.05),
    0 8px 18px -4px oklch(19.8% 0.011 248 / 0.08);
  --wltt-shadow-lg:
    0 4px 8px -2px oklch(19.8% 0.011 248 / 0.06),
    0 18px 38px -8px oklch(19.8% 0.011 248 / 0.12);
  --wltt-shadow-xl:
    0 8px 16px -4px oklch(19.8% 0.011 248 / 0.07),
    0 32px 64px -12px oklch(19.8% 0.011 248 / 0.16);
  --wltt-shadow-brand:
    0 2px 6px -1px oklch(55.3% 0.151 248 / 0.24),
    0 10px 24px -6px oklch(55.3% 0.151 248 / 0.28);

  /* 渐变：低饱和、同色相系，避免"电光紫青"AI 味 */
  --wltt-gradient-brand: linear-gradient(
    135deg,
    var(--wltt-primary-600) 0%,
    var(--wltt-primary-500) 46%,
    var(--wltt-accent-500) 100%
  );
  --wltt-gradient-surface: linear-gradient(
    180deg,
    var(--wltt-gray-0) 0%,
    var(--wltt-gray-25) 100%
  );
  --wltt-gradient-aurora: radial-gradient(
    120% 90% at 12% 0%,
    oklch(93.4% 0.036 248 / 0.85) 0%,
    transparent 58%
  );

  /* 遮罩 */
  --wltt-scrim: oklch(19.8% 0.011 248 / 0.42);

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
 * 3. 语义层 Semantic · 深色模式（独立设计，非反转）
 * 深色底不用纯黑：用 gray-950/1000 保持"有厚度"的黑。
 * -------------------------------------------------------------------------*/
:root[data-theme="dark"],
:root.dark {
  --wltt-surface-base:      var(--wltt-gray-1000);
  --wltt-surface-raised:    var(--wltt-gray-900);
  --wltt-surface-sunken:    oklch(8.4% 0.008 248);
  --wltt-surface-overlay:   oklch(19.8% 0.011 248 / 0.82);
  --wltt-surface-brand:     var(--wltt-primary-700);
  --wltt-surface-brand-hover:var(--wltt-primary-800);
  --wltt-surface-brand-soft:oklch(29.8% 0.081 248 / 0.36);
  --wltt-surface-inverse:   var(--wltt-gray-50);

  --wltt-text-primary:   var(--wltt-gray-50);
  --wltt-text-secondary: var(--wltt-gray-400);
  --wltt-text-tertiary:  var(--wltt-gray-500);
  --wltt-text-disabled:  var(--wltt-gray-700);
  --wltt-text-inverse:   var(--wltt-gray-950);
  --wltt-text-brand:     var(--wltt-primary-300);
  --wltt-text-on-brand:  oklch(99.4% 0.004 248);
  --wltt-text-danger:    var(--wltt-danger-300);
  --wltt-text-success:   var(--wltt-success-300);
  --wltt-text-warn:      var(--wltt-warn-300);

  --wltt-border-subtle:  oklch(29.6% 0.013 248 / 0.68);
  --wltt-border-default: oklch(40.1% 0.013 248 / 0.62);
  --wltt-border-strong:  oklch(50.4% 0.012 248 / 0.72);
  --wltt-border-brand:   var(--wltt-primary-500);
  --wltt-border-focus:   var(--wltt-primary-400);

  --wltt-fill-hover:    oklch(98.1% 0.003 248 / 0.062);
  --wltt-fill-active:   oklch(98.1% 0.003 248 / 0.108);
  --wltt-fill-selected: oklch(46.2% 0.135 248 / 0.34);

  --wltt-state-danger-bg:  oklch(43.8% 0.158 25 / 0.20);
  --wltt-state-success-bg: oklch(54.2% 0.124 150 / 0.20);
  --wltt-state-warn-bg:    oklch(65.8% 0.135 76 / 0.20);
  --wltt-state-info-bg:    oklch(46.2% 0.135 248 / 0.22);

  /* 深色下阴影几乎不可见 → 改用"发光边"与更重的外扩影 */
  --wltt-shadow-xs:
    0 1px 2px oklch(0% 0 0 / 0.36);
  --wltt-shadow-sm:
    0 1px 2px oklch(0% 0 0 / 0.40),
    0 2px 8px -1px oklch(0% 0 0 / 0.34);
  --wltt-shadow-md:
    0 2px 5px -1px oklch(0% 0 0 / 0.42),
    0 10px 22px -4px oklch(0% 0 0 / 0.46);
  --wltt-shadow-lg:
    0 4px 10px -2px oklch(0% 0 0 / 0.46),
    0 22px 44px -8px oklch(0% 0 0 / 0.56);
  --wltt-shadow-xl:
    0 8px 18px -4px oklch(0% 0 0 / 0.50),
    0 38px 72px -12px oklch(0% 0 0 / 0.64);
  --wltt-shadow-brand:
    0 2px 8px -1px oklch(64.1% 0.148 248 / 0.36),
    0 12px 28px -6px oklch(64.1% 0.148 248 / 0.40);

  --wltt-gradient-brand: linear-gradient(
    135deg,
    var(--wltt-primary-500) 0%,
    var(--wltt-primary-400) 48%,
    var(--wltt-accent-400) 100%
  );
  --wltt-gradient-surface: linear-gradient(
    180deg,
    var(--wltt-gray-900) 0%,
    var(--wltt-gray-1000) 100%
  );
  --wltt-gradient-aurora: radial-gradient(
    120% 90% at 12% 0%,
    oklch(46.2% 0.135 248 / 0.34) 0%,
    transparent 60%
  );

  --wltt-scrim: oklch(0% 0 0 / 0.62);

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * 4. 字体系统 Typography
 * 中英混排：西文优先，中文回退；刻意避开 Inter / Roboto 等 AI 默认款。
 * -------------------------------------------------------------------------*/
:root {
  --wltt-font-sans:
    "Söhne", "Avenir Next", "Segoe UI Variable Text", "Segoe UI",
    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI",
    system-ui, sans-serif;
  --wltt-font-serif:
    "Source Serif 4", "Noto Serif SC", "Songti SC", Georgia, serif;
  --wltt-font-mono:
    "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
  --wltt-font-numeric: "Roboto Mono", "SF Mono", ui-monospace, monospace;

  /* 字号：1.200 比例（小三级）——信息密度优先，非营销页的大跳级 */
  --wltt-text-2xs: 0.6875rem; /* 11px 角标 */
  --wltt-text-xs:  0.75rem;   /* 12px 辅助 */
  --wltt-text-sm:  0.8125rem; /* 13px 密集正文 */
  --wltt-text-md:  0.875rem;  /* 14px 正文基准 */
  --wltt-text-lg:  1rem;      /* 16px 强调正文 */
  --wltt-text-xl:  1.125rem;  /* 18px 卡片标题 */
  --wltt-text-2xl: 1.375rem;  /* 22px 区块标题 */
  --wltt-text-3xl: 1.75rem;   /* 28px 页面标题 */
  --wltt-text-4xl: 2.25rem;   /* 36px 数据主数值 */
  --wltt-text-5xl: 3rem;      /* 48px 首屏主视觉 */

  --wltt-leading-tight:  1.18;
  --wltt-leading-snug:   1.35;
  --wltt-leading-normal: 1.52;
  --wltt-leading-relaxed:1.72;

  /* 字距：大字号收紧，小字号放宽（光学修正） */
  --wltt-tracking-tighter: -0.022em;
  --wltt-tracking-tight:   -0.012em;
  --wltt-tracking-normal:   0em;
  --wltt-tracking-wide:     0.014em;
  --wltt-tracking-wider:    0.045em;

  --wltt-weight-regular:  400;
  --wltt-weight-medium:   510;
  --wltt-weight-semibold: 590;
  --wltt-weight-bold:     680;

  /* 中文数字与西文数字对齐修正 */
  --wltt-font-feature-num: "tnum" 1, "lnum" 1, "ss01" 1;
}

/* ---------------------------------------------------------------------------
 * 5. 空间系统 Spacing · 4pt 基座
 * -------------------------------------------------------------------------*/
:root {
  --wltt-space-0:  0;
  --wltt-space-1:  0.25rem;  /* 4  */
  --wltt-space-2:  0.5rem;   /* 8  */
  --wltt-space-3:  0.75rem;  /* 12 */
  --wltt-space-4:  1rem;     /* 16 */
  --wltt-space-5:  1.25rem;  /* 20 */
  --wltt-space-6:  1.5rem;   /* 24 */
  --wltt-space-8:  2rem;     /* 32 */
  --wltt-space-10: 2.5rem;   /* 40 */
  --wltt-space-12: 3rem;     /* 48 */
  --wltt-space-16: 4rem;     /* 64 */
  --wltt-space-20: 5rem;     /* 80 */
  --wltt-space-24: 6rem;     /* 96 */
  --wltt-space-32: 8rem;     /* 128 */

  /* 组件级语义间距 */
  --wltt-gap-inline-xs: var(--wltt-space-1);
  --wltt-gap-inline-sm: var(--wltt-space-2);
  --wltt-gap-inline-md: var(--wltt-space-3);
  --wltt-pad-control-x: var(--wltt-space-4);
  --wltt-pad-control-y: var(--wltt-space-2);
  --wltt-pad-card:      var(--wltt-space-6);
  --wltt-pad-panel:     var(--wltt-space-8);
  --wltt-stack-tight:   var(--wltt-space-2);
  --wltt-stack-normal:  var(--wltt-space-4);
  --wltt-stack-loose:   var(--wltt-space-8);
  --wltt-section-gap:   var(--wltt-space-16);

  /* 布局栅格与容器 */
  --wltt-container-sm: 40rem;
  --wltt-container-md: 56rem;
  --wltt-container-lg: 72rem;
  --wltt-container-xl: 88rem;
  --wltt-container-max: 96rem;
  --wltt-gutter: clamp(var(--wltt-space-4), 4vw, var(--wltt-space-10));
}

/* ---------------------------------------------------------------------------
 * 6. 形状系统 Radius / Stroke
 * -------------------------------------------------------------------------*/
:root {
  --wltt-radius-xs:  0.25rem;
  --wltt-radius-sm:  0.375rem;
  --wltt-radius-md:  0.625rem;
  --wltt-radius-lg:  0.875rem;
  --wltt-radius-xl:  1.25rem;
  --wltt-radius-2xl: 1.75rem;
  --wltt-radius-full: 999rem;

  /* 同心圆角：内层圆角 = 外层圆角 − 内边距，避免"圆角不协调" */
  --wltt-radius-nested: calc(var(--wltt-radius-lg) - var(--wltt-space-1));

  --wltt-stroke-hairline: 1px;
  --wltt-stroke-thin:     1.5px;
  --wltt-stroke-medium:   2px;

  --wltt-blur-sm: 6px;
  --wltt-blur-md: 16px;
  --wltt-blur-lg: 32px;
}

/* ---------------------------------------------------------------------------
 * 7. 动效系统 Motion
 * 时长律：100（微反馈）/ 200（状态切换）/ 300（布局与进场）/ 500（叙事性）
 * 缓动：进场用减速曲线（out-expo），退场用加速曲线（in-quad），
 *       移动用强调曲线（in-out-quint）——指数曲线是"高级感"的关键。
 * -------------------------------------------------------------------------*/
:root {
  --wltt-dur-instant: 60ms;
  --wltt-dur-fast:    100ms;
  --wltt-dur-quick:   160ms;
  --wltt-dur-base:    200ms;
  --wltt-dur-slow:    300ms;
  --wltt-dur-slower:  500ms;
  --wltt-dur-narrative: 760ms;

  --wltt-ease-standard:   cubic-bezier(0.32, 0.72, 0, 1);
  --wltt-ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --wltt-ease-out-quint:  cubic-bezier(0.22, 1, 0.36, 1);
  --wltt-ease-in-quad:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --wltt-ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --wltt-ease-spring:     cubic-bezier(0.34, 1.42, 0.64, 1);
  --wltt-ease-linear:     linear;

  /* 位移距离律 */
  --wltt-shift-xs: 2px;
  --wltt-shift-sm: 4px;
  --wltt-shift-md: 8px;
  --wltt-shift-lg: 16px;
  --wltt-shift-xl: 32px;

  /* 组合过渡（常用简写） */
  --wltt-transition-colors:
    color var(--wltt-dur-fast) var(--wltt-ease-standard),
    background-color var(--wltt-dur-fast) var(--wltt-ease-standard),
    border-color var(--wltt-dur-fast) var(--wltt-ease-standard);
  --wltt-transition-transform:
    transform var(--wltt-dur-base) var(--wltt-ease-out-expo);
  --wltt-transition-shadow:
    box-shadow var(--wltt-dur-base) var(--wltt-ease-standard);
  --wltt-transition-all:
    all var(--wltt-dur-base) var(--wltt-ease-standard);
}

/* ---------------------------------------------------------------------------
 * 8. 层级 Elevation / Z-Index
 * -------------------------------------------------------------------------*/
:root {
  --wltt-z-base:            0;
  --wltt-z-sticky:          100;
  --wltt-z-header:          200;
  --wltt-z-drawer:          300;
  --wltt-z-dropdown:        400;
  --wltt-z-overlay:         500;
  --wltt-z-modal:           600;
  --wltt-z-popover:         700;
  --wltt-z-toast:           800;
  --wltt-z-tooltip:         900;
  --wltt-z-debug:           999;
}

/* ---------------------------------------------------------------------------
 * 9. 断点参考（CSS 无法在 media query 中使用变量，此处仅作文档真源）
 *   xs < 480 | sm 480 | md 768 | lg 1024 | xl 1280 | 2xl 1536
 * -------------------------------------------------------------------------*/
:root {
  --wltt-bp-xs: 480px;
  --wltt-bp-sm: 640px;
  --wltt-bp-md: 768px;
  --wltt-bp-lg: 1024px;
  --wltt-bp-xl: 1280px;
  --wltt-bp-2xl: 1536px;

  /* 触控目标最小尺寸（WCAG 2.2 target-size） */
  --wltt-tap-min: 44px;
  --wltt-control-h-sm: 32px;
  --wltt-control-h-md: 40px;
  --wltt-control-h-lg: 48px;
}

/* ---------------------------------------------------------------------------
 * 10. 无障碍与降级
 * -------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  :root {
    --wltt-dur-instant: 0ms;
    --wltt-dur-fast:    0ms;
    --wltt-dur-quick:   0ms;
    --wltt-dur-base:    0ms;
    --wltt-dur-slow:    0ms;
    --wltt-dur-slower:  0ms;
    --wltt-dur-narrative: 0ms;
    --wltt-transition-colors: none;
    --wltt-transition-transform: none;
    --wltt-transition-shadow: none;
    --wltt-transition-all: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --wltt-text-secondary: var(--wltt-gray-800);
    --wltt-text-tertiary:  var(--wltt-gray-700);
    --wltt-border-subtle:  var(--wltt-gray-300);
    --wltt-border-default: var(--wltt-gray-400);
  }
}