/* Design tokens: the single source of every colour, size and motion value in the app.
   Components never use raw values; change a token here and every screen follows.
   Theme: follows the system unless the user picks one (html[data-theme="light" | "dark"]). */

:root {
  color-scheme: light dark;

  /* Neutral surfaces, lightest to strongest */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e8ebf0;
  --overlay: rgba(15, 18, 24, 0.42);
  --border: #e3e6eb;
  --border-strong: #d1d6de;

  /* Text */
  --text: #0e1116;
  --text-2: #4a5261;
  --text-3: #7a8394;
  --text-on-accent: #ffffff;

  /* Brand accent: actions, focus, selection. Never used for up/down. */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef0ff;
  --accent-text: #3730a3;

  /* Meaning: market direction and status */
  --up: #0a8f61;
  --up-strong: #087a53;
  --up-soft: #e6f6ef;
  --down: #d92d43;
  --down-strong: #b9233a;
  --down-soft: #fdecee;
  --warn: #b26a00;
  --warn-soft: #fff4e0;
  --info: #2563eb;
  --info-soft: #e9f0fe;
  --neutral-soft: #eef0f3;

  /* Charts */
  --chart-grid: #eceef2;
  --chart-line: var(--text);
  --chart-up: var(--up);
  --chart-down: var(--down);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.05);
  --shadow-3: 0 12px 32px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  /* Type: system faces (SF Pro on Apple, Segoe on Windows, Roboto on Android) */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;
  --lh-tight: 1.2;
  --lh: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-tight: -0.015em;
  --tracking-caps: 0.06em;

  /* Space: 4-point grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* Motion: short and purposeful; removed for reduced motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 320ms;

  /* Layout */
  --sidebar-w: 240px;
  --ai-w: 400px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --content-max: 1180px;
  --tap: 44px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Dark, from the system unless the user chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0c10;
    --surface: #111419;
    --surface-2: #171b22;
    --surface-3: #1f242d;
    --overlay: rgba(0, 0, 0, 0.6);
    --border: #222731;
    --border-strong: #2f3541;
    --text: #e9ecf1;
    --text-2: #a8b0bd;
    --text-3: #747d8c;
    --accent: #8c88ff;
    --accent-hover: #a3a0ff;
    --accent-soft: rgba(140, 136, 255, 0.14);
    --accent-text: #b9b6ff;
    --text-on-accent: #0b0b1a;
    --up: #34d399;
    --up-strong: #5be3ad;
    --up-soft: rgba(52, 211, 153, 0.13);
    --down: #ff6b7a;
    --down-strong: #ff8b97;
    --down-soft: rgba(255, 107, 122, 0.13);
    --warn: #f6b445;
    --warn-soft: rgba(246, 180, 69, 0.13);
    --info: #6aa1ff;
    --info-soft: rgba(106, 161, 255, 0.13);
    --neutral-soft: rgba(255, 255, 255, 0.06);
    --chart-grid: #1c2129;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

/* Dark, chosen explicitly: the same values */
:root[data-theme="dark"] {
  --bg: #0a0c10;
  --surface: #111419;
  --surface-2: #171b22;
  --surface-3: #1f242d;
  --overlay: rgba(0, 0, 0, 0.6);
  --border: #222731;
  --border-strong: #2f3541;
  --text: #e9ecf1;
  --text-2: #a8b0bd;
  --text-3: #747d8c;
  --accent: #8c88ff;
  --accent-hover: #a3a0ff;
  --accent-soft: rgba(140, 136, 255, 0.14);
  --accent-text: #b9b6ff;
  --text-on-accent: #0b0b1a;
  --up: #34d399;
  --up-strong: #5be3ad;
  --up-soft: rgba(52, 211, 153, 0.13);
  --down: #ff6b7a;
  --down-strong: #ff8b97;
  --down-soft: rgba(255, 107, 122, 0.13);
  --warn: #f6b445;
  --warn-soft: rgba(246, 180, 69, 0.13);
  --info: #6aa1ff;
  --info-soft: rgba(106, 161, 255, 0.13);
  --neutral-soft: rgba(255, 255, 255, 0.06);
  --chart-grid: #1c2129;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t: 0ms;
    --t-slow: 0ms;
  }
}