/* Design tokens — owner: shell.
   Dark is the primary theme; light is a polished alternate (html[data-theme="light"]).
   Taiwan convention: --up = red, --down = green. Chart code reads these via charts/theme.js. */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #060a14;
  --bg-2: #0a1122;
  --bg-glow-1: rgba(76, 104, 255, 0.16);
  --bg-glow-2: rgba(255, 77, 94, 0.06);
  --panel: rgba(14, 21, 39, 0.66);
  --panel-solid: #0d1427;
  --panel-2: rgba(22, 32, 58, 0.72);
  --panel-hover: rgba(34, 48, 84, 0.55);
  --overlay: rgba(3, 6, 14, 0.62);
  --border: rgba(150, 172, 230, 0.11);
  --border-strong: rgba(150, 172, 230, 0.22);
  --grid: rgba(150, 172, 230, 0.075);
  --blur: 18px;

  /* Text */
  --text: #e7edf8;
  --text-2: #b9c4da;
  --muted: #8190ac;
  --faint: #7481a0; /* 4.7:1 on panel */

  /* Accent (single electric hue) */
  --accent: #6c8cff;
  --accent-strong: #8aa4ff;
  --accent-soft: rgba(108, 140, 255, 0.16);
  --accent-glow: rgba(108, 140, 255, 0.45);
  --on-accent: #050814;

  /* Market semantics (紅漲綠跌) */
  --up: #ff4d5e;
  --up-soft: rgba(255, 77, 94, 0.15);
  --down: #1fcb7e;
  --down-soft: rgba(31, 203, 126, 0.14);
  --flat: #8a94a8;
  --warn: #f5b544;
  --warn-soft: rgba(245, 181, 68, 0.14);
  --danger: #ff6b6b;
  --info: var(--accent);

  /* MA line colours for charts */
  --ma5: #f5b544;
  --ma10: #c77dff;
  --ma20: #6c8cff;
  --ma60: #43c6d9;

  /* Type */
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --fs-2xs: 11px; /* CJK legibility floor */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 24px;
  --fs-3xl: 34px;
  --lh: 1.5;

  /* Space / shape */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* Layout */
  --topbar-h: 52px;
  --tabs-h: 42px;
  --lab-w: 312px;
  --drawer-w: min(600px, 46vw);
  --timeline-h: 96px;
  --z-drawer: 40;
  --z-sheet: 50;
  --z-palette: 80;
  --z-toast: 90;
  --z-boot: 100;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 700ms;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f8;
  --bg-2: #e4e9f4;
  --bg-glow-1: rgba(80, 104, 255, 0.12);
  --bg-glow-2: rgba(224, 41, 63, 0.05);
  --panel: rgba(255, 255, 255, 0.74);
  --panel-solid: #ffffff;
  --panel-2: rgba(246, 248, 253, 0.9);
  --panel-hover: rgba(226, 232, 247, 0.9);
  --overlay: rgba(20, 28, 48, 0.28);
  --border: rgba(30, 44, 84, 0.1);
  --border-strong: rgba(30, 44, 84, 0.2);
  --grid: rgba(30, 44, 84, 0.07);

  --text: #0d1426;
  --text-2: #2c3854;
  --muted: #5b6784;
  --faint: #6b7690;

  --accent: #3a5bff;
  --accent-strong: #2544e6;
  --accent-soft: rgba(58, 91, 255, 0.1);
  --accent-glow: rgba(58, 91, 255, 0.28);
  --on-accent: #ffffff;

  --up: #e0293f;
  --up-soft: rgba(224, 41, 63, 0.1);
  --down: #077d47; /* 5.2:1 on white (AA) */
  --down-soft: rgba(7, 125, 71, 0.1);
  --flat: #6f7a90;
  --warn: #9a6200; /* 5.1:1 on white (AA) */
  --warn-soft: rgba(154, 98, 0, 0.12);
  --danger: #d93a3a;

  --ma5: #d98a00;
  --ma10: #9b4dd9;
  --ma20: #3a5bff;
  --ma60: #0e98ad;

  --shadow-1: 0 1px 2px rgba(20, 30, 60, 0.06), 0 8px 24px -14px rgba(20, 30, 60, 0.25);
  --shadow-2: 0 2px 6px rgba(20, 30, 60, 0.06), 0 28px 60px -24px rgba(20, 30, 60, 0.35);
}

@media (max-width: 900px) {
  :root {
    --topbar-h: 50px;
    --timeline-h: 84px;
    --drawer-w: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
}