/* ============================================================================
   ChipWorld — Design Tokens
   ----------------------------------------------------------------------------
   单一可信源。所有颜色/字号/间距/阴影只在这里定义，组件层禁止写死数值。
   命名规则：--{类别}-{语义}-{层级}
   视觉方向：深色紫蓝科技（Dark Violet Electric）
     · 色相主轴 247°（紫罗兰）→ 222°（电光蓝）→ 210°（冷白高光）
     · 青色 #00E5FF 已全部移除（客户否稿原因：色相偏 60–80°，不是深浅问题）
   ========================================================================== */

:root {
  /* ==== 1. 色彩：基底（深紫黑，不是黑蓝） ================================ */
  --bg-void:      #070411;   /* 页面最外层 / Hero */
  --bg-base:      #0A0718;   /* 常规区块背景 */
  --bg-elev-1:    #150E2E;   /* 卡片 / 面板 */
  --bg-elev-2:    #1C1340;   /* 卡片 hover / 嵌套面板 */
  --bg-elev-3:    #241852;   /* 输入框 / 表头 */
  --bg-inset:     #050209;   /* 下沉区域（表单内凹、页脚、顶栏） */

  /* ==== 2. 色彩：紫蓝主色轴 ============================================== */
  --violet-100:   #E8E0FF;
  --violet-300:   #A080E0;   /* 柔紫：文字强调 / 链接（对卡片底 5.87:1） */
  --violet-400:   #8E6BF5;   /* hover 亮态 */
  --violet-500:   #7C5CFF;   /* 主强调：描边 / 发光 / 图标（不作小字正文） */
  --violet-600:   #6E4BE8;   /* 按钮渐变亮端 */
  --violet-700:   #4B32A8;   /* 仅装饰线条，不承载文字 */

  --blue-300:     #8FB4FF;
  --blue-500:     #4A7BFF;   /* 次强调 */
  --blue-600:     #3A5CE0;
  --blue-700:     #2A3FA8;

  --glow-100:     #C8DCFF;   /* 冷白高光：发光线条 / 描边高亮 / 大标题 */

  /* 兼容旧变量名（历史组件里仍在引用，语义等同上面的主色） */
  --cyan-100:     var(--violet-100);
  --cyan-300:     var(--violet-300);
  --cyan-500:     var(--violet-500);
  --cyan-600:     var(--violet-500);
  --cyan-700:     var(--violet-700);

  /* ==== 3. 色彩：语义状态 ================================================ */
  --amber-500:    #FFB067;   /* 警示 / 待确认 */
  --green-500:    #3DD9A0;   /* 成功 / 可供货 */
  --danger-500:   #FF5C7A;   /* 错误 / 表单校验 */

  /* ==== 4. 色彩：文字（对比度已按 WCAG 实测，见 design-system.md 第 2.4 节） */
  --text-primary:   #EFEBFF;  /* on --bg-void 17.40:1 / on 卡片 15.87:1（AAA） */
  --text-secondary: #B7AFD4;  /* 9.76:1 / 8.90:1（AAA） */
  --text-muted:     #8E85AB;  /* 5.89:1 / 5.37:1（AA，小字可用） */
  --text-disabled:  #6B6382;  /* 3.61:1 —— 仅禁用态，WCAG 对禁用元素豁免 */
  --text-on-accent: #FFFFFF;  /* 主按钮文字：渐变最亮端 #7050F5 上 5.05:1 */
  --text-link:      var(--violet-300);

  /* ==== 5. 描边与分隔 ==================================================== */
  --line-subtle:   rgba(160, 128, 224, 0.14);
  --line-default:  rgba(160, 128, 224, 0.22);
  --line-strong:   rgba(160, 128, 224, 0.36);
  --line-accent:   rgba(124, 92, 255, 0.55);
  --line-glow:     rgba(200, 220, 255, 0.20);

  /* ==== 6. 玻璃拟态（参考图的质感来源之一） ============================== */
  --glass-bg:        rgba(21, 14, 46, 0.55);
  --glass-bg-strong: rgba(21, 14, 46, 0.78);
  --glass-border:    rgba(160, 128, 224, 0.22);
  /* 仅用于卡片 / 导航 / 浮层；列表项与表格禁用（见 design-system.md 6.1） */
  --glass-blur:      blur(14px) saturate(140%);

  /* ==== 7. 渐变（全部 CSS 生成，不依赖图片） ============================= */
  --grad-brand:    linear-gradient(135deg, #6040E0 0%, #4070E0 52%, #A080E0 100%);
  /* 主按钮：渐变两端的白字对比度都 ≥5:1，亮端不越过 #7050F5 这条线 */
  --grad-cta:      linear-gradient(135deg, #7050F5 0%, #5B3BE0 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(124,92,255,.20) 0%, rgba(74,123,255,.14) 60%, rgba(160,128,224,.10) 100%);
  --grad-text:     linear-gradient(96deg, #FFFFFF 8%, var(--glow-100) 56%, var(--violet-300) 100%);
  --grad-panel:    linear-gradient(168deg, rgba(28, 19, 64, .78) 0%, rgba(10, 7, 24, .72) 100%);
  --grad-hairline: linear-gradient(90deg, transparent, var(--line-accent), transparent);

  /* 背景光晕：两层径向（左 247° / 右 222°）+ 一层顶部冷白，还原参考图光斑 */
  --grad-radial:
    radial-gradient(60% 48% at 16% -8%, rgba(124, 92, 255, .42) 0%, rgba(124, 92, 255, .14) 44%, transparent 74%),
    radial-gradient(54% 44% at 90% 0%, rgba(74, 123, 255, .34) 0%, rgba(74, 123, 255, .10) 48%, transparent 76%),
    radial-gradient(46% 34% at 54% 30%, rgba(200, 220, 255, .09) 0%, transparent 72%);

  /* ==== 8. 字体 ========================================================== */
  --font-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 流体字号：320px → 1440px 连续变化，避免逐断点重写 */
  /* H1：上限 3.5rem 是刻意的——再大俄语标题会折成 4 行，把 CTA 挤出首屏 */
  --fs-display:  clamp(2rem, 1.05rem + 2.95vw, 3.5rem);
  --fs-h2:       clamp(1.5rem, 1.05rem + 2.05vw, 2.5rem);
  --fs-h3:       clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  --fs-h4:       1.0625rem;
  --fs-body-lg:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-body:     1rem;      /* 16px，移动端正文最小字号 */
  --fs-sm:       0.875rem;  /* 14px */
  --fs-xs:       0.75rem;   /* 12px，仅用于标注 */
  --fs-stat:     clamp(2rem, 1.3rem + 2.6vw, 3.25rem);

  --lh-tight:    1.08;
  --lh-heading:  1.18;
  --lh-body:     1.62;      /* 西里尔字母降部多，行高不能低于 1.55 */
  --lh-loose:    1.75;

  --ls-tight:    -0.022em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-caps:     0.14em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ==== 9. 间距：4px 基准，8 阶 ========================================== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --section-py: clamp(48px, 6vw, 96px);
  --container-max: 1240px;
  --container-pad: clamp(16px, 4vw, 32px);

  /* ==== 10. 圆角 ========================================================= */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ==== 11. 阴影与发光 =================================================== */
  --shadow-card:   0 1px 0 rgba(255,255,255,.05) inset, 0 20px 44px -28px rgba(0,0,0,.95);
  --shadow-raise:  0 1px 0 rgba(255,255,255,.07) inset, 0 28px 60px -30px rgba(0,0,0,1);
  --shadow-header: 0 1px 0 var(--line-subtle), 0 18px 40px -28px rgba(0,0,0,.9);

  --glow-accent:      0 0 0 1px var(--line-accent), 0 0 22px -6px rgba(124,92,255,.65);
  --glow-accent-soft: 0 0 0 1px rgba(124,92,255,.30), 0 0 34px -10px rgba(124,92,255,.45);
  --glow-accent-strong: 0 0 0 1px rgba(124,92,255,.65), 0 0 26px -2px rgba(124,92,255,.55), 0 0 72px -18px rgba(160,128,224,.60);
  --glow-text:        0 0 24px rgba(124,92,255,.45);

  /* ==== 12. 动效 ========================================================= */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-reveal: 620ms;

  --ease-out: cubic-bezier(.22, .68, .28, 1);
  --ease-in-out: cubic-bezier(.55, .06, .28, 1);
  --ease-spring: cubic-bezier(.34, 1.32, .52, 1);

  /* ==== 13. 层级 ========================================================= */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-mobilebar: 150;

  /* ==== 14. 布局常量 ===================================================== */
  --header-h: 72px;
  --topbar-h: 36px;
  --mobilebar-h: 60px;
}

/* 高对比度系统偏好：加强描边，去掉大面积发光（发光会糊掉文字边缘） */
@media (prefers-contrast: more) {
  :root {
    --line-subtle: rgba(190, 165, 235, 0.34);
    --line-default: rgba(190, 165, 235, 0.48);
    --text-secondary: #D6CFEA;
    --text-muted: #B7AFD4;
    --glass-bg: rgba(21, 14, 46, 0.88);
    --glass-bg-strong: rgba(16, 10, 36, 0.96);
    --glow-accent: 0 0 0 2px var(--violet-500);
    --glow-accent-soft: 0 0 0 2px rgba(124,92,255,.6);
    --glow-accent-strong: 0 0 0 2px var(--violet-500);
  }
}