@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================================
   ATLAS DESIGN SYSTEM
   Flat, warm, editorial. Newsreader for headlines + ALL mileage numbers,
   system-ui for UI/body, DM Mono for eyebrows + small counts.
   No gradients or glow on UI surfaces — the ONLY exception is a subtle
   radial allowed behind the globe (.globe-glow).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. LIGHT TOKENS (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;   /* native widgets (selects, scrollbars) match the app theme */
  /* Core surfaces + ink */
  --bg:             #efe9dd;
  --surface:        #f6f1e7;
  --surface-raised: #fdfbf6;
  --ink:            #2a2419;
  /* Modal/sheet backdrop dim — theme-adaptive so it actually dims in dark mode (a near-black
     overlay over the near-black dark surface was imperceptible). */
  --scrim:          rgba(20,16,10,.40);

  /* Muted ink ramp — darkened so secondary/tertiary text clears WCAG AA (4.5:1) on EVERY light
     surface it lands on (bg #efe9dd … surface-raised #fdfbf6). muted-2/3 were 3.9–4.0:1 (fail);
     now ≥4.98:1 on bg. Used for placeholders, eyebrows, ticket meta, list headers, tab-bar labels. */
  --muted-1:        #6f6451;
  --muted-2:        #6b6250;
  --muted-3:        #6b6250;

  /* Borders */
  --border:         #ddd3c0;
  --border-soft:    #e6dcc9;

  /* Brass accent family. --brass is the fill/arc accent; --brass-deep is the TEXT/link/focus brass,
     darkened to clear AA text (4.5:1) on light surfaces AND ≥3:1 as the keyboard focus ring (it was
     #956b1d = 3.95:1 text / fail). Now #85600f ≈ 4.7:1 on bg/surface/brass-tint. */
  --brass:          #b08a3e;
  --brass-deep:     #85600f;
  --brass-tint-bg:  #faf3e4;
  --brass-tint-bd:  #e7d3a6;

  /* Brand violet — the logo + the OUTLIER "flare". A deep, professional purple. */
  --brand:          #5b3ba6;

  /* OUTLIER "flare" — the purple accent for outlier-designated fares (replaces the old gold/brass
     treatment, for a coherent palette). -deep = AA text/icon on the tint or paper; -line = the globe
     arc + nav accent; -glow = the soft outer flare on outlier cards. */
  --flare-line:     #7a4fd0;
  --flare-deep:     #5b3ba6;
  --flare-tint-bg:  #efe8fb;
  --flare-tint-bd:  #d8c8f3;
  --flare-glow:     rgba(123,79,208,.26);

  /* Seat / award availability — seat-fg darkened to clear AA on the seat pill background. */
  --seat-bg:        #eef3ec;
  --seat-fg:        #56754e;

  /* Error / destructive (replaces stray hardcoded reds). */
  --error:          #b4453a;

  /* --- Globe (light) --- */
  --globe-ocean:    #e8ece7;
  --globe-border:   #a89968;   /* darkened from #b8aa88: the old tone was ~1.1:1 on the warm land — borders/graticule were nearly invisible in light mode */
  --globe-pin-bg:   rgba(38,32,22,0.92);   /* fare-pin chip: warm-dark on the light paper globe */
  --globe-pin-ink:  #f2ede3;               /* cream label on the dark chip */
  /* Land palette (shared both themes, listed here for reference) */
  --globe-land-1:   #d6a9a0;
  --globe-land-2:   #d2a98f;
  --globe-land-3:   #cdaeb0;
  --globe-land-4:   #d3c3a0;
  --globe-land-5:   #b8c39a;
  --globe-land-6:   #cf988a;
  --globe-land-7:   #dab6ac;
  --globe-land-8:   #c4bd8f;

  /* --- Trip-length category colors (light) --- */
  --cat-all-line:          #6f6451;
  --cat-all-bg:            #ece3d2;
  --cat-weekend-line:      #6f978c;
  --cat-weekend-bg:        #dde8e2;
  --cat-one_week-line:     #8a9b5e;
  --cat-one_week-bg:       #e7ead4;
  --cat-two_weeks-line:    #bd8459;
  --cat-two_weeks-bg:      #f1e2d3;
  --cat-outlier-line:  #7a4fd0;   /* purple flare (was brass #b08a3e) */
  --cat-outlier-bg:    #efe8fb;

  /* --- Radius --- */
  --r-card:  12px;  /* cards 11–12px */
  --r-pill:  20px;  /* pills / chips 18–20px */
  --r-input: 10px;  /* inputs 9–12px */
  --r-tile:  8px;   /* logo tile */

  /* --- Layout primitives (consumed by components.css) --- */
  --atlas-topbar-h: 60px;   /* top bar height */
  --atlas-rail-w:   222px;  /* left filter rail width (212–230) */
  --atlas-gap:      18px;   /* shell padding / gutter */
  --atlas-tile:     34px;   /* airline logo tile */
  --atlas-eyebrow:  11px;   /* mono eyebrow font-size — single source of truth (was dead: .atlas re-declared 11px) */

  /* --- Shadow (light) --- FLAT ONLY: depth via shadow, never gradient/glow */
  --shadow-card:  0 1px 3px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.06);
  --shadow-float: 0 18px 50px rgba(0,0,0,.14);
}

/* ----------------------------------------------------------------------------
   2. DARK TOKENS (override)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;   /* native widgets dark whenever the manual toggle is dark, regardless of OS */
  /* Core surfaces + ink */
  --bg:             #19150f;
  --surface:        #221d15;
  --surface-raised: #1d1810;
  --ink:            #f0e8d6;
  /* Pure-black, higher-opacity dim reads as dimming even against the near-black dark surfaces. */
  --scrim:          rgba(0,0,0,.62);

  /* Muted ink ramp — lightened so secondary/tertiary text clears WCAG AA (4.5:1) on the DARK
     surfaces too (was #8a8068 = 4.28:1 on --surface / 4.05:1 on the brass-tint card — fail). This
     single fix also lifts the ticket .program/.foot-meta/.routing + the itinerary date/city labels. */
  --muted-1:        #b3a890;
  --muted-2:        #9a8f74;
  --muted-3:        #9a8f74;

  /* Borders */
  --border:         #352e22;
  --border-soft:    #2c261c;

  /* Brass accent family */
  --brass:          #d4a861;
  --brass-deep:     #e3b977;
  --brass-tint-bg:  #2a2113;
  --brass-tint-bd:  #5a4a2a;

  /* Brand violet — lighter on the dark surface so the logo + outlier flare stay vivid + legible. */
  --brand:          #b79bf0;

  /* OUTLIER "flare" (dark) */
  --flare-line:     #b79bf0;
  --flare-deep:     #cdb6f7;
  --flare-tint-bg:  #271e3d;
  --flare-tint-bd:  #4f3f7a;
  --flare-glow:     rgba(183,155,240,.30);

  /* Seat / award availability */
  --seat-bg:        #1c2518;
  --seat-fg:        #86b06f;

  /* Error / destructive — lighter on the dark surface for readability. */
  --error:          #e0857a;

  /* --- Globe (dark) --- ocean + border flip; land palette stays the same */
  --globe-ocean:    #13100a;
  --globe-border:   #4d4231;
  --globe-pin-bg:   rgba(239,233,221,0.94);   /* fare-pin chip: light paper on the dark globe (separates from the near-black ocean) */
  --globe-pin-ink:  #19150f;                  /* dark label on the light chip */

  /* --- Trip-length category colors (dark) --- */
  --cat-all-line:          #857a5f;
  --cat-all-bg:            #2c261c;
  --cat-weekend-line:      #7fa89a;
  --cat-weekend-bg:        #1d2a26;
  --cat-one_week-line:     #a3b06a;
  --cat-one_week-bg:       #272a17;
  --cat-two_weeks-line:    #cf9469;
  --cat-two_weeks-bg:      #2c2117;
  --cat-outlier-line:  #b79bf0;   /* purple flare (was brass #d4a861) */
  --cat-outlier-bg:    #271e3d;

  /* --- Shadow (dark) --- heavier float opacity for legibility on dark bg */
  --shadow-card:  0 1px 3px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.06);
  --shadow-float: 0 18px 50px rgba(0,0,0,.4);
}

/* ----------------------------------------------------------------------------
   3. BASE LAYER
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  transition: background .25s, color .25s;
}

/* ----------------------------------------------------------------------------
   4. TYPE UTILITIES
   -------------------------------------------------------------------------- */

/* Headlines — Newsreader serif, medium weight */
.headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
}

/* Mileage / price numbers — Newsreader with tabular figures so columns align */
.price {
  font-family: 'Newsreader', Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Eyebrows — DM Mono, uppercase, wide tracking, quiet ink */
.eyebrow {
  font-family: 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted-3);
}

/* General monospace — DM Mono (small counts, codes) */
.mono {
  font-family: 'DM Mono', ui-monospace, monospace;
}

/* Search placeholder — Newsreader italic (per spec) */
.search input::placeholder,
input.search::placeholder {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
}

/* ----------------------------------------------------------------------------
   5. GLOBE GLOW
   The single allowed soft effect: a subtle radial behind the globe only.
   Place this on an element sized/positioned behind the globe canvas.
   -------------------------------------------------------------------------- */
.globe-glow {
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--brass) 16%, transparent) 0%,
    transparent 68%
  );
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   6. BACK LINK
   Canonical "back to the map" affordance shared by every subpage (heatmap,
   distribution, audits). One quiet treatment so the subpages read as one app —
   subpages must NOT re-declare .back locally.
   -------------------------------------------------------------------------- */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-1);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 14px;
}
.back:hover { color: var(--ink); }
a.back:hover, a.back:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* Shared ERROR variant for subpage empty states: a failed load must look distinct from an
   intentional empty/loading state (red-tinted, bordered) — mirrors index.html's .panel-empty.is-error
   so every subpage gives the same polished failure feedback. */
.empty.is-error {
  border: 1px solid var(--error);
  background: color-mix(in srgb, var(--error) 8%, transparent);
  color: var(--ink);
}

/* The .back link is the first interactive element on every subpage — give it the same 44px
   touch-target floor on phones that the app's other controls get (text size unchanged). */
@media (max-width: 879.98px) {
  .back { min-height: 44px; padding-block: 11px; align-items: center; }
}