/* Legroom — "Map-forward Cinematic" redesign (spec 0015).
   A living, full-bleed map with the UI floating over it in translucent glass.
   Everything here is scoped under `body.redesign` so default visitors are
   untouched until the final cutover; `theme-boot.js` adds the class for `?ui=next`.

   Phase 0 is the TOKEN FOUNDATION only — color/glass/elevation/motion/inset
   custom properties + the shared `.glass` recipe. No layout yet (Phase 1).

   Color tokens deliberately reuse the EXISTING var names (--accent-strong is the
   one map-style.js reads live for the route line) so every current UI module
   restyles for free; only the values are retuned for a cinematic dusk/dawn. */

/* ---- Tokens: cinematic Dusk (dark, the default look) ---- */
body.redesign {
  /* Type — display moves to Fraunces (editorial serif); body/data unchanged. */
  --display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Signal colors — warm amber route, mint charge, coral rest. */
  --accent: #ffb866;
  --accent-strong: #ff9e3d; /* the route line + markers (map-style.js reads this) */
  --accent-ink: #ffc98a;    /* small accent text on dusk surfaces (clears AA) */
  --charge: #3ddc97;        /* mint — charging */
  --rest: #ff7a59;          /* coral/clay — family rest break */

  /* Dusk-ink surfaces — deep, slightly blue near-black so the map glows. */
  --bg: #0b0e14;
  --bg-glow: radial-gradient(130% 90% at 80% -15%, rgba(255, 158, 61, 0.10) 0%, rgba(255, 158, 61, 0) 55%);
  --surface: #121723;
  --surface-2: #1a2130;
  --text: #f2f5fa;
  --text-dim: #9aa6b8;
  --border: #28303f;
  --spine: rgba(255, 158, 61, 0.36);
  --accent-soft: rgba(255, 158, 61, 0.14);
  --on-accent: #1a1205;

  /* Glass — translucent surfaces that float over the map. */
  --glass-bg: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-border: color-mix(in srgb, var(--text) 14%, transparent);
  --glass-blur: 18px;
  --glass-shadow: 0 10px 44px rgba(0, 0, 0, 0.46);

  /* Elevation scale (old --shadow aliases the mid step for unported modules). */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --elev-2: 0 10px 30px rgba(0, 0, 0, 0.40);
  --elev-3: 0 24px 60px rgba(0, 0, 0, 0.50);
  --shadow: var(--elev-2);

  /* Motion. */
  --ease-cine: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;

  /* Shape. */
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --gap: 18px;

  /* Map insets — how far the route must stay clear of the floating panels.
     Consumed by map-style.js fit(); overridden per breakpoint in Phase 1. */
  --map-inset-top: 84px;
  --map-inset-right: 24px;
  --map-inset-bottom: 24px;
  --map-inset-left: 24px;

  color-scheme: dark;
}

/* ---- Tokens: cinematic Dawn (light) ---- */
body.redesign[data-theme="light"] {
  --accent: #ff9e3d;
  --accent-strong: #e8761a; /* darker so the route reads on a bright basemap */
  --accent-ink: #b8560a;    /* small accent text on light surfaces (AA) */
  --charge: #15a974;
  --rest: #e05a36;

  --bg: #e9eef5;
  --bg-glow: radial-gradient(120% 80% at 80% -10%, rgba(232, 118, 26, 0.10) 0%, rgba(232, 118, 26, 0) 55%);
  --surface: #ffffff;
  --surface-2: #f1f5fa;
  --text: #14181f;
  --text-dim: #5a6472;
  --border: #d7dee8;
  --spine: rgba(232, 118, 26, 0.40);
  --accent-soft: rgba(232, 118, 26, 0.12);
  --on-accent: #2a1808;

  --glass-bg: color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-border: color-mix(in srgb, var(--text) 10%, transparent);
  --glass-shadow: 0 10px 40px rgba(40, 50, 70, 0.18);

  --elev-1: 0 1px 2px rgba(40, 50, 70, 0.08);
  --elev-2: 0 12px 32px rgba(40, 50, 70, 0.14);
  --elev-3: 0 24px 60px rgba(40, 50, 70, 0.20);

  color-scheme: light;
}

/* ---- The glass recipe: a translucent island floating over the map. ---- */
body.redesign .glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}

/* Glass leans on backdrop-filter; where it isn't supported, fall back to a
   more opaque surface so text stays legible over the map. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.redesign .glass {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
  }
}