/* ==========================================================================
   GEO 工作台 · 设计令牌 (Design Tokens)
   --------------------------------------------------------------------------
   三端共用：管理控制台 / 客户自助看台 / 品牌官网
   色彩空间：OKLCH（感知均匀），并为旧浏览器提供 HEX 渐进降级
   层级约定：只在新主题下重写「语义层」，原始层保持不变
   ========================================================================== */

/* ---- 原始层 Primitives (不随主题变化) ---------------------------------- */
:root {
  /* 中性色阶 —— 带极微冷调 (hue 250)，避免死灰 */
  --neutral-0:  #ffffff;
  --neutral-50: #fbfcfd;
  --neutral-100:#f5f7f9;
  --neutral-150:#eef1f4;
  --neutral-200:#e4e8ec;
  --neutral-300:#d0d7de;
  --neutral-400:#aab3bf;
  --neutral-500:#7d8894;
  --neutral-600:#5b6673;
  --neutral-700:#414c59;
  --neutral-800:#2b3540;
  --neutral-900:#1a222b;
  --neutral-950:#111820;

  /* 品牌 松绿 fir —— 冷调深绿，区别于「成功」的亮绿 */
  --fir-50:  #ecf6f1;
  --fir-100: #d3ebe0;
  --fir-200: #a9d8c4;
  --fir-300: #74bda1;
  --fir-400: #3f9d7c;
  --fir-500: #167c5a;
  --fir-600: #0f6649;
  --fir-700: #0b4f39;
  --fir-800: #08392a;
  --fir-900: #05271d;

  /* 语义色 — 信息 / 警告 / 危险 / 成功 */
  --iris-100:#e6eefc; --iris-400:#6b93dd; --iris-500:#3d68bd; --iris-600:#2d529b; --iris-700:#22407a;
  --amber-100:#fdf1dc; --amber-400:#e0a33c; --amber-500:#b57c14; --amber-600:#96650e; --amber-700:#754e09;
  --rust-100:#fbeaea;  --rust-400:#d17272;  --rust-500:#b83232;  --rust-600:#992828;  --rust-700:#7a1f1f;
  --jade-100:#e8f5ee;  --jade-400:#5cb884;  --jade-500:#2f8c5e;  --jade-600:#237048;  --jade-700:#1a5637;

  /* 排版 */
  --font-ui: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC",
             "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

  /* 字阶 — 模块化比例 1.20，流式 clamp */
  --fs-2xs: 0.6875rem;   /* 11px  标签 micro */
  --fs-xs:  0.75rem;     /* 12px  辅助说明 */
  --fs-sm:  0.8125rem;   /* 13px  次要正文 */
  --fs-base:0.875rem;     /* 14px  正文（后台默认，密度优先）*/
  --fs-md:  0.9375rem;   /* 15px  正文强调 */
  --fs-lg:  1.0625rem;   /* 17px  小标题 */
  --fs-xl:  clamp(1.15rem, 0.9rem + 0.7vw, 1.35rem);   /* 区块标题 */
  --fs-2xl: clamp(1.35rem, 1rem + 1.2vw, 1.75rem);     /* 页面标题 */
  --fs-3xl: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);   /* 落地页 Hero */
  --fs-4xl: clamp(2.25rem, 1.2rem + 4.5vw, 4rem);      /* 官网主标题 */

  /* 行高 */
  --lh-tight:1.25; --lh-snug:1.4; --lh-normal:1.6; --lh-loose:1.75;

  /* 字重 —— 中文避免过重造成糊字 */
  --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:650;

  /* 间距 —— 4px 基准 + 流式大间距 */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px; --sp-6:24px;  --sp-8:32px;  --sp-10:40px;
  --sp-12:48px;--sp-16:64px; --sp-20:80px; --sp-24:96px;
  --section-gap: clamp(32px, 4vw, 64px);

  /* 圆角 —— 小圆角体系，克制不油腻 */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;

  /* 边框 */
  --bw-hair:1px; --bw-thick:2px;

  /* 动效 —— 指数缓动，无回弹 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* ease-out-expo */
  --ease-out-q: cubic-bezier(0.25, 1, 0.5, 1);      /* ease-out-quart */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:340ms; --dur-slower:520ms;

  /* 层级 z-index */
  --z-sticky:20; --z-drawer:60; --z-modal:70; --z-toast:90; --z-popover:80;
}

/* OKLCH 覆盖（支持的浏览器用感知均匀版本，覆盖上面的 HEX 降级） */
@supports (color: oklch(50% 0.1 200)) {
  :root {
    --neutral-0:  oklch(100% 0 0);
    --neutral-50: oklch(99% 0.002 250);
    --neutral-100:oklch(97.5% 0.003 250);
    --neutral-150:oklch(95.5% 0.004 250);
    --neutral-200:oklch(92.5% 0.005 250);
    --neutral-300:oklch(86% 0.006 250);
    --neutral-400:oklch(72% 0.009 250);
    --neutral-500:oklch(58% 0.012 250);
    --neutral-600:oklch(48% 0.014 250);
    --neutral-700:oklch(39% 0.016 250);
    --neutral-800:oklch(28% 0.018 250);
    --neutral-900:oklch(21% 0.016 250);
    --neutral-950:oklch(15% 0.014 250);

    --fir-500: oklch(48% 0.105 158);
    --fir-600: oklch(41% 0.095 158);
    --fir-700: oklch(34% 0.082 158);
    --fir-400: oklch(60% 0.115 158);
    --fir-300: oklch(74% 0.105 158);
    --fir-200: oklch(86% 0.070 158);
    --fir-100: oklch(94% 0.038 158);
    --fir-50:  oklch(97.5% 0.018 158);

    --iris-500: oklch(52% 0.135 262); --iris-600: oklch(44% 0.125 262);
    --iris-400: oklch(66% 0.115 262); --iris-100: oklch(94% 0.030 262);
    --amber-500:oklch(63% 0.135 76);  --amber-600:oklch(54% 0.130 76);
    --amber-400:oklch(75% 0.140 76);  --amber-100:oklch(95% 0.045 76);
    --rust-500: oklch(50% 0.170 27);  --rust-600:oklch(43% 0.155 27);
    --rust-400: oklch(65% 0.150 27);  --rust-100: oklch(94% 0.035 27);
    --jade-500: oklch(58% 0.135 152); --jade-600:oklch(49% 0.125 152);
    --jade-400: oklch(70% 0.140 152); --jade-100: oklch(94% 0.045 152);

    /* 暗色用绳索：深色面色索引 */
    --dk-surface-0: oklch(15% 0.012 250);
    --dk-surface-1: oklch(19% 0.013 250);
    --dk-surface-2: oklch(23% 0.014 250);
    --dk-surface-3: oklch(28% 0.015 250);
  }
}

/* ---- 语义层 Semantic (亮色默认) ---------------------------------------- */
:root {
  --bg-canvas:    var(--neutral-100);   /* 应用底 */
  --bg-surface:   var(--neutral-0);     /* 卡片/面板 */
  --bg-surface-2: var(--neutral-50);    /* 次级面（表头、行悬停）*/
  --bg-inset:     var(--neutral-150);   /* 内嵌槽（代码块、KPI 槽）*/
  --bg-scrim:     rgb(17 24 32 / 0.44); /* 遮罩 */

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-on-accent: var(--neutral-0);
  --text-disabled:  var(--neutral-400);

  --border-subtle:  var(--neutral-200);  /* 分区 hairline */
  --border-default: var(--neutral-300);  /* 输入框、控件 */
  --border-strong:  var(--neutral-400);  /* 悬停 */
  --border-focus:   var(--fir-500);

  --accent:        var(--fir-500);
  --accent-hover:  var(--fir-600);
  --accent-active: var(--fir-700);
  --accent-subtle: var(--fir-100);
  --accent-text:   var(--fir-700);

  --success:      var(--jade-500);  --success-bg:  var(--jade-100);  --success-text: var(--jade-700);
  --warning:      var(--amber-500); --warning-bg:  var(--amber-100); --warning-text: var(--amber-700);
  --danger:       var(--rust-500);  --danger-bg:   var(--rust-100);  --danger-text:  var(--rust-700);
  --info:         var(--iris-500);  --info-bg:     var(--iris-100);  --info-text:    var(--iris-700);

  /* 暗色下用：刻意降低饱和的强调色 */
  --shadow-xs: 0 1px 1px 0 rgb(26 34 43 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(26 34 43 / 0.06), 0 1px 1px -1px rgb(26 34 43 / 0.04);
  --shadow-md: 0 4px 8px -2px rgb(26 34 43 / 0.08), 0 2px 4px -2px rgb(26 34 43 / 0.05);
  --shadow-lg: 0 12px 24px -6px rgb(26 34 43 / 0.12), 0 4px 8px -4px rgb(26 34 43 / 0.06);
  --shadow-xl: 0 24px 48px -12px rgb(26 34 43 / 0.18);

  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 26%, transparent);
  --body-weight: var(--fw-normal);
  --grain-opacity: 0.028;   /* 纸张微纹理，克制的质感记忆点 */
  --chart-grid: var(--neutral-200);
}

/* ---- 语义层 Semantic (暗色) -------------------------------------------- */
:root[data-theme="dark"] {
  --bg-canvas:    var(--dk-surface-0, #111820);
  --bg-surface:   var(--dk-surface-1, #18202a);
  --bg-surface-2: var(--dk-surface-2, #1e2732);
  --bg-inset:     var(--dk-surface-3, #26303c);
  --bg-scrim:     rgb(0 0 0 / 0.6);

  --text-primary:   oklch(94% 0.004 250);
  --text-secondary: oklch(72% 0.010 250);
  --text-tertiary:  oklch(58% 0.012 250);
  --text-on-accent: oklch(99% 0 0);
  --text-disabled:  oklch(44% 0.010 250);

  --border-subtle:  oklch(28% 0.014 250);
  --border-default: oklch(34% 0.016 250);
  --border-strong:  oklch(45% 0.018 250);
  --border-focus:   var(--fir-300);

  /* 强调色在深色底上去饱和 + 提亮，保证 4.5:1 */
  --accent:        oklch(66% 0.115 158);
  --accent-hover:  oklch(72% 0.115 158);
  --accent-active: oklch(60% 0.110 158);
  --accent-subtle: oklch(26% 0.045 158);
  --accent-text:   oklch(80% 0.100 158);
  --text-on-accent: oklch(16% 0.020 158);   /* 亮强调色须配深色字才达 4.5:1 */

  --success: oklch(70% 0.130 152); --success-bg: oklch(26% 0.045 152); --success-text: oklch(84% 0.100 152);
  --warning: oklch(78% 0.130 76);  --warning-bg: oklch(28% 0.050 76);  --warning-text: oklch(88% 0.100 76);
  --danger:  oklch(66% 0.150 27);  --danger-bg:  oklch(27% 0.055 27);  --danger-text:  oklch(85% 0.105 27);
  --info:    oklch(70% 0.115 262); --info-bg:    oklch(27% 0.050 262); --info-text:    oklch(85% 0.095 262);

  --shadow-xs: 0 1px 1px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 14px 28px -8px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 28px 56px -16px rgb(0 0 0 / 0.7);

  --body-weight: 350;   /* 深色底上减重，避免光晕发胖 */
  --grain-opacity: 0.05;
  --chart-grid: oklch(30% 0.014 250);
}

/* ---- Reset / Base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: var(--body-weight);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;   /* 数字等宽，表格对齐的关键 */
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1,h2,h3,h4 { font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: -0.011em; }
p { line-height: var(--lh-normal); }

/* 可见焦点环 —— 只用键盘时出现 */
:focus-visible {
  outline: var(--bw-thick) solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-subtle); color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 纸张微纹理 —— 全局质感层（唯一的装饰性选择，极弱） */
.grain::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend, multiply);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] { --grain-blend: overlay; }