/* ─────────────────────────────────────────────────────────────────────────
   Meridian — design tokens
   Built on the Hypeglass "Aurora" direction: soft glass, sage on warm
   off-white, generous whitespace, rounded corners, gentle multi-layer
   shadows. Geist + Geist Mono. Light default with a calm dark mode.

   Gain/loss + buy/hold/sell are the ONLY place we use saturated red/green.
   The sage accent carries everything else.
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ── Type stacks ────────────────────────────────────────────────────────── */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* ── Type scale ─────────────────────────────────────────────────────────── */
  --fs-2xs: 10px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 46px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  --tracking-tighter: -0.025em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-caps: 0.08em;

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

  /* ── Warm-off-white chrome (light) ──────────────────────────────────────── */
  --bg-app: #FBFAF7;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F4F2EC;
  --bg-tint: #F0EEE7;

  --fg-1: #1B1F1C;
  --fg-2: #5E6B62;
  --fg-3: #97A199;
  --fg-inv: #FBFAF7;

  --border-1: #ECEAE3;
  --border-2: #DCD8CC;
  --border-strong: #B0B3AA;

  --focus-ring: rgba(111, 156, 127, 0.35);

  /* ── Sage — the brand accent ────────────────────────────────────────────── */
  --sage-50: #EEF4F0;
  --sage-100: #E7F0E8;
  --sage-200: #C8DCCE;
  --sage-300: #9FBFA9;
  --sage-400: #7FA889;
  --sage-500: #6F9C7F;
  --sage-600: #557D65;
  --sage-700: #3D604B;
  --sage-800: #2F5440;
  --sage-900: #1F3A2A;

  /* ── Gain / loss — the ONLY saturated red/green ─────────────────────────── */
  --pos-fg: #1B7D4F;       /* gains text */
  --pos-bg: #E4F2E9;       /* gains tint */
  --pos-strong: #18A05E;   /* chart line up */
  --neg-fg: #BB3B33;       /* losses text */
  --neg-bg: #F8E5E3;       /* losses tint */
  --neg-strong: #D8453B;   /* chart line down */

  /* buy / hold / sell badges */
  --buy-bg: #E4F2E9;  --buy-fg: #166B43;  --buy-accent: #1B7D4F;
  --hold-bg: #F1EFE8; --hold-fg: #5A5E54; --hold-accent: #8A8E85;
  --sell-bg: #F8E5E3; --sell-fg: #97302A; --sell-accent: #BB3B33;

  /* ── Semantic classification (research signal/mixed/hype/uncertain) ─────── */
  --signal-bg: #E7F0E8; --signal-fg: #2F5440; --signal-border: #6F9C7F; --signal-accent: #6F9C7F; --signal-soft: #EEF4F0;
  --mixed-bg: #FBEDD8; --mixed-fg: #6B4A18; --mixed-border: #D4A24A; --mixed-accent: #D4A24A; --mixed-soft: #FBF5E6;
  --hype-bg: #F8E2D8; --hype-fg: #5A2818; --hype-border: #E07A5F; --hype-accent: #E07A5F; --hype-soft: #FBEFE7;
  --uncertain-bg: #F2F0EA; --uncertain-fg: #4E5450; --uncertain-border: #B0B3AA; --uncertain-accent: #8A8E85;

  /* Sky — info / neutral highlight */
  --sky-bg: #E3EEF5; --sky-fg: #1F4868; --sky-border: #5B91BC; --sky-accent: #5B91BC;
  --danger-bg: #F4D8D8; --danger-fg: #6B1F1F; --danger-accent: #B14545;

  /* status dots */
  --ok: #1B7D4F; --warn: #C98A1E; --err: #BB3B33;

  /* ── Geometry ───────────────────────────────────────────────────────────── */
  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-4: 14px;
  --radius-5: 20px;
  --radius-pill: 999px;

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

  /* ── Elevation ──────────────────────────────────────────────────────────── */
  --elev-1: 0 1px 2px rgb(27 31 28 / 0.04), 0 1px 0 rgb(27 31 28 / 0.02);
  --elev-2: 0 4px 12px rgb(27 31 28 / 0.06), 0 1px 2px rgb(27 31 28 / 0.04);
  --elev-3: 0 12px 32px rgb(27 31 28 / 0.10), 0 2px 6px rgb(27 31 28 / 0.05);
  --elev-launcher: 0 8px 24px rgb(111 156 127 / 0.30), 0 2px 4px rgb(27 31 28 / 0.06);

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --sidebar-w: 232px;
  --content-max: 1320px;

  color-scheme: light;
}

/* ── Dark mode — calm, low-glare, sage preserved ──────────────────────────── */
:root[data-theme="dark"] {
  --bg-app: #14171A;
  --bg-surface: #1B1F22;
  --bg-elevated: #20262A;
  --bg-sunken: #22282C;
  --bg-tint: #262D30;

  --fg-1: #E8ECE7;
  --fg-2: #9AA59C;
  --fg-3: #6B756D;
  --fg-inv: #14171A;

  --border-1: #2A2F2D;
  --border-2: #363D39;
  --border-strong: #4A524C;

  --focus-ring: rgba(127, 168, 137, 0.45);

  --sage-500: #7FA889;
  --sage-700: #6F9C7F;
  --sage-800: #8FB89A;

  --pos-fg: #5FCB8E;  --pos-bg: #16281F;  --pos-strong: #4FC383;
  --neg-fg: #EF8077;  --neg-bg: #2C1A18;  --neg-strong: #E5736B;

  --buy-bg: #16281F;  --buy-fg: #6FD09A;  --buy-accent: #4FC383;
  --hold-bg: #262A26; --hold-fg: #A7AEA4; --hold-accent: #8A8E85;
  --sell-bg: #2C1A18; --sell-fg: #EF8077; --sell-accent: #E5736B;

  --signal-bg: #1A2A20; --signal-fg: #9FD3AE; --signal-border: #3D6049; --signal-accent: #7FA889; --signal-soft: #18241C;
  --mixed-bg: #2A2316; --mixed-fg: #E2BC76; --mixed-border: #6B5526; --mixed-accent: #D4A24A; --mixed-soft: #221D12;
  --hype-bg: #2C1C16; --hype-fg: #E9A189; --hype-border: #6E4031; --hype-accent: #E07A5F; --hype-soft: #231811;
  --uncertain-bg: #24282A; --uncertain-fg: #A7AEA4; --uncertain-border: #3D4540; --uncertain-accent: #8A8E85;

  --sky-bg: #16242E; --sky-fg: #8FC0E0; --sky-border: #2E536E; --sky-accent: #5B91BC;
  --danger-bg: #2C1817; --danger-fg: #EC8A82; --danger-accent: #D8453B;

  --ok: #4FC383; --warn: #E2BC76; --err: #EF8077;

  --elev-1: 0 1px 2px rgb(0 0 0 / 0.40), 0 1px 0 rgb(0 0 0 / 0.20);
  --elev-2: 0 4px 14px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.30);
  --elev-3: 0 14px 36px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.35);
  --elev-launcher: 0 8px 24px rgb(0 0 0 / 0.50), 0 0 0 1px rgb(127 168 137 / 0.20);

  color-scheme: dark;
}