/* ============================================================
   Voyage design tokens — the ONLY place design values live.
   Direction: Soft Organic Eco-Modern.
   Light is the default identity; dark is "forest at dusk".
   Components consume semantic tokens only — never raw colors.
   ============================================================ */

@layer tokens, reset, base, components, utilities, page;

@layer tokens {

:root {
  /* ---------- type ---------- */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-numeric: "Outfit", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;

  --fs--2: 0.75rem;  --fs--1: 0.875rem; --fs-0: 1rem;
  --fs-1: 1.125rem;  --fs-2: 1.375rem;  --fs-3: 1.75rem;
  --fs-4: 2.25rem;   --fs-5: 3rem;      --fs-6: clamp(2.3rem, 5vw, 3.5rem);

  /* ---------- space ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- shape (generous, organic) ---------- */
  --r-1: 10px; --r-2: 14px; --r-3: 26px; --r-4: 34px; --r-full: 999px;
  --btn-radius: var(--r-full);
  --chip-radius: var(--r-full);
  --card-radius: 26px;
  --input-radius: 14px;
  --label-radius: var(--r-full);

  /* ---------- motion ---------- */
  --dur-1: 150ms; --dur-2: 300ms; --dur-3: 600ms; --dur-draw: 1600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------- light (default identity: meadow) ---------------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #f6f4ec;
  --bg-raised: #fdfcf7;
  --bg-inset: #ecefe0;
  --surface: #fdfcf7;
  --text: #1f2b20;
  --text-muted: #52604d;
  --text-subtle: #7f8d78;
  --accent: #2e6b46;            /* deep forest */
  --on-accent: #f4faf2;
  --accent-2: #c9e265;          /* fresh lime */
  --border: #dfe3d0;
  --border-strong: #bcc6ab;
  --focus-ring: #2e6b46;
  --success: #35814f;
  --warn: #96700f;
  --danger: #b04a3a;
  --co2-good: #35814f;
  --mode-rail: #47799e;
  --mode-bus: #a3793d;
  --mode-ferry: #3d94a8;
  --mode-walk: #7f8d78;
  --mode-sleeper: #7a68b0;
  --map-route: #2e6b46;
  --map-route-alt: #47799e;
  --map-marker: #2e6b46;
  --map-hub: #47799e;
  --overlay: rgba(31, 43, 32, 0.4);
  --shadow-1: 0 2px 8px rgba(46, 107, 70, 0.07);
  --shadow-2: 0 18px 44px rgba(46, 107, 70, 0.13);
  --shadow-3: 0 30px 70px rgba(46, 107, 70, 0.18);
  --header-bg: rgba(246, 244, 236, 0.9);
  --hero-bg: #f6f4ec;
  --footer-bg: var(--bg-raised);
}

/* ---------------- dark (forest at dusk) ---------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121a14;
  --bg-raised: #17211a;
  --bg-inset: #1f2b21;
  --surface: #17211a;
  --text: #e8efe4;
  --text-muted: #aebba7;
  --text-subtle: #75846e;
  --accent: #86d3a2;
  --on-accent: #0f1a12;
  --accent-2: #d9ef85;
  --border: #263329;
  --border-strong: #3c4d40;
  --focus-ring: #86d3a2;
  --success: #7cc794;
  --warn: #d9b855;
  --danger: #d97e6c;
  --co2-good: #7cc794;
  --mode-rail: #7fa9c9;
  --mode-bus: #c9a263;
  --mode-ferry: #6fbfd1;
  --mode-walk: #8a987f;
  --mode-sleeper: #ab9bd9;
  --map-route: #86d3a2;
  --map-route-alt: #7fa9c9;
  --map-marker: #86d3a2;
  --map-hub: #7fa9c9;
  --overlay: rgba(5, 10, 6, 0.55);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 18px 44px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 30px 70px rgba(0, 0, 0, 0.5);
  --header-bg: rgba(18, 26, 20, 0.9);
  --hero-bg: #121a14;
  --footer-bg: var(--bg-raised);
}

} /* @layer tokens */