/* Design tokens — color, type, space. Two themes, single source of truth. */

:root {
  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.55;
  --lh-loose: 1.8;

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

  /* Spacing — 4px base, multiplicative */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 60px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* Shadows (composed per-theme below) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.32);
}

/* ─── Dark theme (default) ─────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #0e1116;
  --bg-elev-1:    #161a21;
  --bg-elev-2:    #1d222b;
  --bg-elev-3:    #262c37;

  --fg:           #e9eef4;
  --fg-muted:     #a8b1bd;
  --fg-faint:     #6f7785;

  --border:       #262c37;
  --border-strong:#384151;

  --accent:       #7cc4ff;     /* lakeside sky blue */
  --accent-fg:    #07111c;
  --accent-soft:  rgba(124, 196, 255, 0.12);

  --warm:         #f4b67a;     /* Florida sun */
  --warm-soft:    rgba(244, 182, 122, 0.14);

  --leaf:         #8ed1a3;     /* moss / oak canopy */
  --leaf-soft:    rgba(142, 209, 163, 0.12);

  --danger:       #ff8888;
  --success:      #8ed1a3;

  --link:         var(--accent);
  --selection:    rgba(124, 196, 255, 0.32);

  /* Map palette mirrors tokens */
  --map-water:    #0c1e2e;
  --map-land:     #161a21;
  --map-road:     #2c3340;
  --map-boundary: rgba(124, 196, 255, 0.55);
}

/* ─── Light theme ──────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:           #fbf9f5;     /* warm paper */
  --bg-elev-1:    #ffffff;
  --bg-elev-2:    #f4efe6;
  --bg-elev-3:    #ece5d6;

  --fg:           #1a1d24;
  --fg-muted:     #4a525e;
  --fg-faint:     #7a8390;

  --border:       #e4ddcd;
  --border-strong:#cabfa8;

  --accent:       #1d6fb6;
  --accent-fg:    #ffffff;
  --accent-soft:  rgba(29, 111, 182, 0.10);

  --warm:         #c47733;
  --warm-soft:    rgba(196, 119, 51, 0.10);

  --leaf:         #3f8a55;
  --leaf-soft:    rgba(63, 138, 85, 0.10);

  --danger:       #b8332c;
  --success:      #3f8a55;

  --link:         var(--accent);
  --selection:    rgba(29, 111, 182, 0.18);

  --map-water:    #c8def0;
  --map-land:     #f4efe6;
  --map-road:     #ffffff;
  --map-boundary: rgba(29, 111, 182, 0.6);

  --shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.08);
  --shadow-md: 0 6px 24px rgba(40, 30, 10, 0.10);
  --shadow-lg: 0 24px 60px rgba(40, 30, 10, 0.14);
}