/* ========================================================================
   web_statistics · Design Tokens

   两层 selector 拆分：
   - [data-mode="dark" | "light"]：surface ladder / text / border / status /
                                   shadow / color-scheme / 模式无关叠层
   - [data-palette="indigo" | "cyan" | "emerald" | "amber" | "rose"]：
                                   accent 系（主色 / 渐变 / chart-pv / ring-）

   <html> 上同时持有 data-mode + data-palette；任意一层变化都触发 tokens 重算。
   palette 切换会派发 CustomEvent('themechange')，charts.js 重渲染 SVG 渐变。
   ======================================================================== */

/* ====================================================================
   Mode layer — Dark
   默认模式：:root 和 [data-mode="dark"] 同时命中，token 一致
   ==================================================================== */
:root,
[data-mode="dark"] {
  /* Surface ladder */
  --bg:               #0a0a0c;
  --bg-elevated:      #0d0d10;
  --surface-1:        #111114;
  --surface-2:        #16161a;
  --surface-3:        #1c1c21;
  --surface-hover:    #1a1a1f;

  /* Hairline borders */
  --border-subtle:    rgba(255, 255, 255, 0.06);
  --border:           rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.16);

  /* Text ladder */
  --text:             #fafafa;
  --text-secondary:   #b4b4be;
  --text-tertiary:    #8b8b96;
  --text-muted:       #6b6b78;

  /* Status */
  --success:          #10b981;
  --success-soft:     rgba(16, 185, 129, 0.16);
  --warning:          #f59e0b;
  --warning-soft:     rgba(245, 158, 11, 0.16);
  --danger:           #ef4444;
  --danger-soft:      rgba(239, 68, 68, 0.16);

  /* Elevation */
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow:           0 4px 12px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.44), 0 2px 6px rgba(0, 0, 0, 0.24);

  /* Chart axis / grid（palette 块仅覆盖 --chart-pv / --chart-uv；grid 跟随 mode） */
  --chart-grid:       var(--border-subtle);

  /* Mode-invariant overlays */
  --on-accent-border: rgba(255, 255, 255, 0.08);
  --highlight-line:   rgba(255, 255, 255, 0.16);
  --button-shadow:    rgba(0, 0, 0, 0.4);
  --scrim:            rgba(0, 0, 0, 0.55);

  /* Status rings（mode 固定；accent rings 在 palette 块） */
  --danger-ring:      rgba(239, 68, 68, 0.32);
  --success-ring:     rgba(16, 185, 129, 0.32);
  --warning-ring:     rgba(245, 158, 11, 0.32);

  /* Ghost tint */
  --ghost-tint:       rgba(255, 255, 255, 0.06);
  --ghost-tint-hover: rgba(255, 255, 255, 0.10);

  color-scheme: dark;
}

/* ====================================================================
   Mode layer — Light
   ==================================================================== */
[data-mode="light"] {
  --bg:               #f7f7f8;
  --bg-elevated:      #ffffff;
  --surface-1:        #ffffff;
  --surface-2:        #f5f5f7;
  --surface-3:        #ebebef;
  --surface-hover:    #f0f0f3;

  --border-subtle:    rgba(10, 10, 12, 0.07);
  --border:           rgba(10, 10, 12, 0.11);
  --border-strong:    rgba(10, 10, 12, 0.18);

  --text:             #18181b;
  --text-secondary:   #3f3f46;
  --text-tertiary:    #71717a;
  --text-muted:       #71717a;

  --success:          #059669;
  --success-soft:     rgba(5, 150, 105, 0.10);
  --warning:          #d97706;
  --warning-soft:     rgba(217, 119, 6, 0.10);
  --danger:           #dc2626;
  --danger-soft:      rgba(220, 38, 38, 0.08);

  --shadow-sm:        0 1px 2px rgba(10, 10, 12, 0.05);
  --shadow:           0 4px 12px rgba(10, 10, 12, 0.07), 0 1px 2px rgba(10, 10, 12, 0.04);
  --shadow-lg:        0 12px 32px rgba(10, 10, 12, 0.10), 0 2px 6px rgba(10, 10, 12, 0.06);

  --chart-grid:       var(--border-subtle);

  /* Light 下 ghost tint 走黑色叠层（不与白底冲突） */
  --ghost-tint:       rgba(10, 10, 12, 0.04);
  --ghost-tint-hover: rgba(10, 10, 12, 0.08);

  color-scheme: light;
}

/* ====================================================================
   Palette layer — Indigo (默认)
   ==================================================================== */
:root,
[data-palette="indigo"] {
  /* Accent */
  --accent:           #6366f1;
  --accent-bright:    #818cf8;
  --accent-hover:     #7c7ff4;
  --accent-soft:      rgba(99, 102, 241, 0.16);
  --accent-softer:    rgba(99, 102, 241, 0.07);
  --accent-glow:      rgba(99, 102, 241, 0.4);
  --gradient-brand:   linear-gradient(135deg, #818cf8 0%, #6366f1 100%);

  /* Chart */
  --chart-pv:         #818cf8;
  --chart-pv-soft:    rgba(129, 140, 248, 0.34);
  --chart-uv:         var(--success);
  --spark-area:       rgba(94, 106, 210, 0.12);

  /* Accent rings */
  --ring-soft:        rgba(99, 102, 241, 0.16);
  --ring-medium:      rgba(99, 102, 241, 0.32);
  --ring-strong:      rgba(99, 102, 241, 0.50);
}

/* ====================================================================
   Palette layer — Cyan (冷蓝)
   ==================================================================== */
[data-palette="cyan"] {
  --accent:           #22d3ee;
  --accent-bright:    #67e8f9;
  --accent-hover:     #06b6d4;
  --accent-soft:      rgba(34, 211, 238, 0.18);
  --accent-softer:    rgba(34, 211, 238, 0.08);
  --accent-glow:      rgba(34, 211, 238, 0.40);
  --gradient-brand:   linear-gradient(135deg, #67e8f9 0%, #06b6d4 100%);

  --chart-pv:         #22d3ee;
  --chart-pv-soft:    rgba(34, 211, 238, 0.34);
  --chart-uv:         var(--success);
  --spark-area:       rgba(34, 211, 238, 0.12);

  --ring-soft:        rgba(34, 211, 238, 0.18);
  --ring-medium:      rgba(34, 211, 238, 0.34);
  --ring-strong:      rgba(34, 211, 238, 0.52);
}

/* ====================================================================
   Palette layer — Emerald (绿)
   ==================================================================== */
[data-palette="emerald"] {
  --accent:           #10b981;
  --accent-bright:    #34d399;
  --accent-hover:     #059669;
  --accent-soft:      rgba(16, 185, 129, 0.18);
  --accent-softer:    rgba(16, 185, 129, 0.08);
  --accent-glow:      rgba(16, 185, 129, 0.40);
  --gradient-brand:   linear-gradient(135deg, #34d399 0%, #059669 100%);

  --chart-pv:         #10b981;
  --chart-pv-soft:    rgba(16, 185, 129, 0.34);
  --chart-uv:         var(--success);
  --spark-area:       rgba(16, 185, 129, 0.12);

  --ring-soft:        rgba(16, 185, 129, 0.18);
  --ring-medium:      rgba(16, 185, 129, 0.34);
  --ring-strong:      rgba(16, 185, 129, 0.52);
}

/* ====================================================================
   Palette layer — Amber (琥珀 / 暖橙)
   ==================================================================== */
[data-palette="amber"] {
  --accent:           #f59e0b;
  --accent-bright:    #fbbf24;
  --accent-hover:     #d97706;
  --accent-soft:      rgba(245, 158, 11, 0.18);
  --accent-softer:    rgba(245, 158, 11, 0.08);
  --accent-glow:      rgba(245, 158, 11, 0.40);
  --gradient-brand:   linear-gradient(135deg, #fbbf24 0%, #d97706 100%);

  --chart-pv:         #f59e0b;
  --chart-pv-soft:    rgba(245, 158, 11, 0.34);
  --chart-uv:         var(--success);
  --spark-area:       rgba(245, 158, 11, 0.12);

  --ring-soft:        rgba(245, 158, 11, 0.18);
  --ring-medium:      rgba(245, 158, 11, 0.34);
  --ring-strong:      rgba(245, 158, 11, 0.52);
}

/* ====================================================================
   Palette layer — Rose (玫瑰红)
   ==================================================================== */
[data-palette="rose"] {
  --accent:           #f43f5e;
  --accent-bright:    #fb7185;
  --accent-hover:     #e11d48;
  --accent-soft:      rgba(244, 63, 94, 0.18);
  --accent-softer:    rgba(244, 63, 94, 0.08);
  --accent-glow:      rgba(244, 63, 94, 0.40);
  --gradient-brand:   linear-gradient(135deg, #fb7185 0%, #e11d48 100%);

  --chart-pv:         #f43f5e;
  --chart-pv-soft:    rgba(244, 63, 94, 0.34);
  --chart-uv:         var(--success);
  --spark-area:       rgba(244, 63, 94, 0.12);

  --ring-soft:        rgba(244, 63, 94, 0.18);
  --ring-medium:      rgba(244, 63, 94, 0.34);
  --ring-strong:      rgba(244, 63, 94, 0.52);
}

/* ====================================================================
   Mode-invariant type / spacing / motion（与主题无关）
   ==================================================================== */
:root {
  /* 2026-10 安全加固（HIGH H-3）：删 Inter / JetBrains Mono（来自 Google
     Fonts）。改为纯 system font stack：macOS / Windows / Linux / Android /
     iOS 各取系统 UI 字体 + 中文 fallback。视觉差异极小，零外联请求。
     font-features（cv02 / ss01 / tnum 等 OpenType 特性）随 Inter 一起删除
     —— system 字体不一定支持，留着会触发无效 CSS 警告。 */
  --font-sans:        -apple-system, BlinkMacSystemFont, "Segoe UI",
                      "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
                      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Monaco,
                      Consolas, "Liberation Mono", "Courier New", monospace;
  --font-features:    "tnum";  /* 等宽数字：system 字体普遍支持 */

  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;

  --r-xs:             4px;
  --r-sm:             6px;
  --r:                8px;
  --r-md:             12px;
  --r-lg:             16px;
  --r-xl:             20px;
  --r-pill:           999px;

  --fs-xs:            11px;
  --fs-sm:            12px;
  --fs-base:          13.5px;
  --fs-md:            14.5px;
  --fs-lg:            16px;
  --fs-xl:            20px;
  --fs-2xl:           22px;
  --fs-3xl:           32px;
  --fs-display:       36px;

  --tracking-display: -0.03em;
  --tracking-tight:   -0.022em;
  --tracking-snug:    -0.015em;
  --tracking-body:    0;

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

  --ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);

  --topbar-h:         60px;
  --sidebar-w:        288px;
  --content-max:      1520px;
}