/* ═══════════════════════════════════════════════════════════════
   Investment OS — Design Tokens（三层架构）
   浅色主题「温暖纸感」：奶油纸底 · 墨色 · 陶土强调
   深色主题「深色奢华」：炭黑底 · 琥珀金 · 终端质感
   层级纪律：L1 原始层 → L2 语义层（组件唯一引用层）→ L3 组件层
   ═══════════════════════════════════════════════════════════════ */

/* ── 自托管字体（拉丁子集，CJK 由 unicode-range 回落系统字体） ── */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20BF;
}

:root {
  color-scheme: light;

  /* ── L1 原始色板 · 温暖纸感 ── */
  --paper: #f7f3ec;
  --cream-50: #faf7f1;
  --cream-100: #f3efe5;
  --cream-200: #e9e1d1;
  --cream-300: #dcd2ba;

  --ink-900: #2a2620;
  --ink-700: #4a443a;
  --ink-500: #6f6759;
  --ink-400: #948b7a;
  --ink-300: #b5ad9c;

  --clay-300: #e0a184;
  --clay-400: #d17f5c;
  --clay-500: #c25e3a;
  --clay-600: #a84e2f;
  --clay-700: #8c3f24;

  --amber-600: #b07d2a;
  --sage-600: #2f7a52;
  --brick-600: #bf3f2e;

  /* ── L2 语义层（组件唯一允许引用） ── */
  --bg: var(--paper);
  --bg-surface: #fdfaf4;
  --bg-surface-muted: var(--cream-100);
  --bg-surface-muted-hover: var(--cream-200);
  --bg-elevated: #fffdf9;

  --text: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted: var(--ink-400);
  --text-inverse: #fdfaf4;

  --accent: var(--clay-500);
  --accent-hover: var(--clay-600);
  --accent-soft: color-mix(in srgb, var(--clay-500) 9%, transparent);
  --accent-soft-hover: color-mix(in srgb, var(--clay-500) 15%, transparent);
  --accent-lighter: var(--clay-300);

  --success: var(--sage-600);
  --success-soft: color-mix(in srgb, var(--sage-600) 9%, transparent);
  --danger: var(--brick-600);
  --danger-soft: color-mix(in srgb, var(--brick-600) 9%, transparent);
  --warning: var(--amber-600);
  --warning-soft: color-mix(in srgb, var(--amber-600) 11%, transparent);

  /* A股语义：红涨绿跌（图表经 chart-theme.js 读取） */
  --up: #bf3f2e;
  --down: #2f7a52;

  --border: rgba(42, 38, 32, 0.08);
  --border-strong: rgba(42, 38, 32, 0.15);
  --border-subtle: rgba(42, 38, 32, 0.05);

  /* ── 字体 ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
  --font-serif: "Fraunces", "Songti SC", "Noto Serif CJK SC", "STSong", serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* 字阶（小字号固定值保密度，大字号 clamp 流体） */
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 16px;
  --text-lg: clamp(17px, 1.3vw, 18px);
  --text-xl: clamp(20px, 1.7vw, 22px);
  --text-2xl: clamp(26px, 2.3vw, 30px);
  --text-3xl: clamp(30px, 3vw, 36px);

  /* ── 动效 ── */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 间距 ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 18px;
  --space-6: 20px;
  --space-8: 28px;
  --space-10: 32px;
  --space-12: 40px;

  /* ── 圆角（纸感偏柔和） ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── 阴影（暖调墨影） ── */
  --shadow-xs: 0 1px 2px rgba(42, 38, 32, 0.05);
  --shadow-sm: 0 1px 3px rgba(42, 38, 32, 0.06), 0 1px 2px rgba(42, 38, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(42, 38, 32, 0.08);
  --shadow-lg: 0 8px 24px rgba(42, 38, 32, 0.1);
  --shadow-xl: 0 16px 40px rgba(42, 38, 32, 0.12);

  /* ── 布局 ── */
  --sidebar-width: 220px;
  --sidebar-collapsed: 60px;
  --header-height: 52px;
  --tabbar-height: 56px;

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-tabbar: 250;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ── L3 组件层 ── */
  --table-head-text: var(--text-muted);
  --table-head-bg: var(--bg-surface-muted);
  --table-head-border: var(--border);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* 深色主题微光（浅色下为空，深色块覆盖） */
  --glow-accent: none;
}

/* ═══════════════════════════════════════════
   Dark Mode — 深色奢华金融科技
   ═══════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ── L1 原始色板 · 炭黑 + 琥珀金 ── */
  --char-950: #0e1013;
  --char-900: #16191d;
  --char-850: #1b1f24;
  --char-800: #23272d;
  --char-700: #2e333a;

  --amber-200: #eccf92;
  --amber-300: #e3b867;
  --amber-400: #d9a441;
  --amber-500: #c08f33;
  --amber-600: #a67a2a;

  /* ── L2 语义层 ── */
  --bg: var(--char-950);
  --bg-surface: var(--char-900);
  --bg-surface-muted: var(--char-850);
  --bg-surface-muted-hover: var(--char-800);
  --bg-elevated: var(--char-800);

  --text: #ece7dd;
  --text-secondary: #a39e93;
  --text-muted: #6f6a61;
  --text-inverse: #14161a;

  --accent: var(--amber-400);
  --accent-hover: var(--amber-300);
  --accent-soft: color-mix(in srgb, var(--amber-400) 12%, transparent);
  --accent-soft-hover: color-mix(in srgb, var(--amber-400) 18%, transparent);
  --accent-lighter: var(--amber-200);

  --success: #4da97a;
  --success-soft: color-mix(in srgb, #4da97a 12%, transparent);
  --danger: #e0604e;
  --danger-soft: color-mix(in srgb, #e0604e 12%, transparent);
  --warning: var(--amber-400);
  --warning-soft: color-mix(in srgb, var(--amber-400) 12%, transparent);

  --up: #e0604e;
  --down: #4da97a;

  --border: rgba(236, 231, 221, 0.08);
  --border-strong: rgba(236, 231, 221, 0.15);
  --border-subtle: rgba(236, 231, 221, 0.05);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.45);

  --table-head-bg: var(--char-850);

  /* 深色激活态微光（克制的终端感） */
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 26%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}