/* ============================================================================
   Trend Radar — Design Tokens
   Visual language: Vercel editorial whitespace + Raycast precision + shadcn restraint.
   Light default, dark theme via [data-theme="dark"].
   No neon. Warm ivory + calm charcoal + restrained red and blue.
   ============================================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --bg:           oklch(98.5% 0.008 85);   /* warm ivory canvas */
  --bg-soft:      oklch(97% 0.010 85);     /* panel surface */
  --surface:      oklch(100% 0 0);         /* card surface */
  --surface-2:    oklch(99% 0.005 85);     /* nested surface */
  --overlay:      oklch(100% 0 0 / 0.72);  /* glassy panel */

  /* ---------- Text ---------- */
  --fg:           oklch(20% 0.012 250);    /* near-black ink */
  --fg-soft:      oklch(32% 0.012 250);
  --muted:        oklch(50% 0.010 250);
  --muted-2:      oklch(62% 0.008 250);
  --placeholder:  oklch(70% 0.006 250);

  /* ---------- Lines ---------- */
  --border:       oklch(92% 0.006 250);    /* hairline */
  --border-soft:  oklch(95% 0.004 250);
  --border-strong:oklch(82% 0.010 250);

  /* ---------- Brand & accents (Restrained) ---------- */
  --accent:       oklch(48% 0.10 245);     /* calm blue */
  --accent-soft:  oklch(94% 0.030 245);
  --accent-fg:    oklch(99% 0.003 245);

  --positive:     oklch(50% 0.11 150);     /* moss green for positive deltas */
  --warning:      oklch(62% 0.13 75);      /* amber */
  --danger:       oklch(54% 0.18 25);      /* restrained brick red */
  --info:         oklch(55% 0.10 245);     /* same family as accent, slightly cooler */

  /* ---------- Typography ---------- */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-display: "Geist", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 44px;
  --fs-5xl: 64px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.12em;

  /* ---------- Layout ---------- */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 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;
  --space-16: 80px;
  --space-20: 112px;

  --container: 1240px;

  /* ---------- Shadow-as-border (Vercel) ---------- */
  --shadow-1: 0 1px 2px rgba(15, 18, 25, 0.04), 0 0 0 1px rgba(15, 18, 25, 0.05);
  --shadow-2: 0 4px 12px -2px rgba(15, 18, 25, 0.06), 0 1px 2px rgba(15, 18, 25, 0.04), 0 0 0 1px rgba(15, 18, 25, 0.05);
  --shadow-3: 0 12px 32px -8px rgba(15, 18, 25, 0.10), 0 2px 6px rgba(15, 18, 25, 0.04), 0 0 0 1px rgba(15, 18, 25, 0.05);
  --shadow-pop: 0 24px 64px -16px rgba(15, 18, 25, 0.18), 0 4px 12px rgba(15, 18, 25, 0.06);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* ---------- Misc ---------- */
  --ring: 0 0 0 3px oklch(48% 0.10 245 / 0.22);
  --ring-soft: 0 0 0 1px var(--border);
}

/* =========================== Dark Theme ================================== */
[data-theme="dark"] {
  --bg:           oklch(14% 0.008 250);   /* calm charcoal */
  --bg-soft:      oklch(17% 0.010 250);
  --surface:      oklch(19% 0.010 250);   /* one notch above bg */
  --surface-2:    oklch(22% 0.012 250);
  --overlay:      oklch(19% 0.010 250 / 0.78);

  --fg:           oklch(96% 0.005 85);
  --fg-soft:      oklch(86% 0.006 85);
  --muted:        oklch(66% 0.010 250);
  --muted-2:      oklch(54% 0.008 250);
  --placeholder:  oklch(44% 0.006 250);

  --border:       oklch(26% 0.010 250);
  --border-soft:  oklch(22% 0.008 250);
  --border-strong:oklch(34% 0.012 250);

  --accent:       oklch(72% 0.13 245);
  --accent-soft:  oklch(28% 0.060 245);
  --accent-fg:    oklch(14% 0.01 245);

  --positive:     oklch(72% 0.13 150);
  --warning:      oklch(76% 0.14 75);
  --danger:       oklch(72% 0.16 25);
  --info:         oklch(72% 0.12 245);

  /* In dark mode shadow-as-border becomes subtle depth + a faint line */
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-3: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-pop: 0 24px 64px -16px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.45);

  --ring: 0 0 0 3px oklch(72% 0.13 245 / 0.30);
}

/* =========================== Optional font mode ========================== */
[data-font="serif"] {
  --font-sans: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --font-display: "Iowan Old Style", "Charter", Georgia, serif;
}
[data-font="mono"] {
  --font-sans: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Geist Mono", ui-monospace, Menlo, monospace;
}