/* Passport Pin web — theme extension vars.
   tokens.ts supersedes the older CSS export (accent FILL stays #2DD4BF in both
   themes; only accent-coloured TEXT darkens). Includes the 2026-08 light-map fix
   and the Wow Update's "Daybreak" light treatment (cool slate landmasses on a
   near-white sea, white coastlines) + motion timing tokens. */

@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/shape.css');
@import url('tokens/base.css');

:root{
  /* The exported dark `faint` (#5B6B84) measures 3.88:1 on #0E1420 — below the
     brand's own ≥4.5:1 rule for every ink, which the app enforces with a test.
     Lifted to the nearest value that clears it while staying dimmer than
     `--pb-muted` (#8A97AC), so the four-step ladder survives. */
  --pb-faint:#6E7F9B;
  --pb-map-ocean:#111B2E;
  --pb-map-border:#46587F;
  --pb-hero-wash:#16203A;
  --pb-hero-wash2:#1D2447;
  --pb-accent-ink:#2DD4BF;
  --pb-amber-ink:#F5A94D;
  --pb-rare-ink:#8B7CF6;
  --pb-legend-ink:#F5C044;
  --pb-coral-ink:#FF7A66;
  --pb-kind-air-ink:#4FB8F5;
  --pb-kind-do-ink:#F2789A;
  --pb-kind-ground-ink:#9BD65F;

  /* ── map states (Wow Update §0.7 — pinned reads on the map) ──
     pinned stays plain hex: the canvas surfaces read it via themeColors(),
     which can't resolve color-mix(). Deeper accent = intent; solid teal = earned. */
  /* Pinned = the stamp colour, receding. A stamp is #2DD4BF in both themes; a pin
     is that hue mixed back toward the map so it reads as "wanted, not yet been".
     Pre-mixed opaque rather than an alpha because themeColors()'s read() only
     accepts values starting with # AND because the SVG pin class REPLACES the land
     class — a fill-opacity would composite against the ocean, not the land. */
  --pb-map-pinned:#35818D;
  --pb-map-hover:color-mix(in srgb, #2DD4BF 14%, var(--pb-map-base));
  --pb-map-pin-ink:#FFFFFF;
  --pb-map-pin-line:#10233A;
  /* the outline around a pinned country. The pinned FILL is the stamp colour
     receding, so the page/ocean stroke it used to inherit disappeared against it. */
  --pb-map-pinned-line:#10233A;
  /* the globe coastline. Split from --pb-map-border so the coast can go white in
     light without erasing the inactive route-stop dots that read that token. */
  --pb-map-coast:#0E1420;
  /* choropleth ramp — authored per theme, not derived. A color-mix ramp collapses
     against a mid-tone land; these dark values equal what the old mixes computed. */
  --pb-lens-b:#287A7E;
  --pb-lens-c:#264E5E;
  --pb-lens-d:#8B7CF6;

  /* ── elevation: glow in dark, shadow in light (one pair, no component forks) ── */
  --pp-card-glow:0 0 24px rgba(var(--pb-accent-rgb),.08);
  --pp-card-glow-hover:0 0 30px rgba(var(--pb-accent-rgb),.14);
  --pp-hero-glow:0 0 60px rgba(var(--pb-accent-rgb),.06);
  --pp-elev-1:0 0 24px rgba(var(--pb-accent-rgb),.08);
  --pp-overlay-shadow:0 24px 80px rgba(8,12,20,.5);

  /* ── glass (only over maps + photography) ── */
  --pp-glass:color-mix(in srgb, var(--pb-surface) 72%, transparent);
  --pp-glass-strong:color-mix(in srgb, var(--pb-surface) 88%, transparent);
  --pp-glass-border:var(--pb-border-strong);
  --pp-glass-blur:blur(12px);

  /* ── photography (theme-invariant inks + scrims) ── */
  --pp-on-photo:#F2F6FB;
  --pp-on-photo-2:#C7D2E2;
  --pp-scrim:linear-gradient(180deg, rgba(8,12,20,0) 0%, rgba(8,12,20,.28) 42%, rgba(8,12,20,.82) 100%);
  --pp-scrim-flat:rgba(8,12,20,.66);

  /* ── motion tokens (03 · Wow Motion Playbook) ── */
  --pp-ease:cubic-bezier(.22,.61,.36,1);
  --pp-spring:cubic-bezier(.34,1.56,.64,1);
  --pp-t-ui:180ms;
  --pp-t-enter:600ms;
  --pp-t-glow:800ms;
  --pp-t-hero:1200ms;

  /* ── layout rhythm ── */
  --pp-col:1180px;
  --pp-gutter:48px;
  --pp-section:56px;
  --pb-r-hero:20px;
  --pb-r-xl:24px;
  --pb-r-sheet:26px;
  --pb-r-chip:11px;
  --pb-r-bar:6px;
  --pp-nav-h:64px;
  /* the nav shrinks once the page scrolls (.pp-nav.is-solid). Anything that
     sticks UNDER the nav is only ever seen in that scrolled state, so it must
     offset by this, not by --pp-nav-h — offsetting by the tall value leaves a
     12px slot that content scrolls through in the open. */
  --pp-nav-h-solid:52px;
}

[data-theme="light"]{
  /* tokens.ts corrections over the export */
  --pb-accent:#2DD4BF;
  --pb-on-accent:#0E1420;
  --pb-accent-rgb:45,212,191;
  --pb-accent-tint:rgba(15,118,110,.08);
  --pb-accent-tint-strong:rgba(15,118,110,.12);
  --pb-accent-border:rgba(15,118,110,.32);
  /* Daybreak darkens `faint` from the export's #6F7F97: on the warmed #F4F7FB page
     that value lands at 4.07:1, and the app's own rule is ≥4.5:1 for every ink. */
  /* nudged from #5F6E88: on the new darker page it measured 4.42:1, just under AA */
  --pb-faint:#5B6982;
  --pb-accent-ink:#0F766E;
  --pb-amber-ink:#9A5F0B;
  --pb-rare-ink:#6D5BE8;
  --pb-legend-ink:#8A6208;
  --pb-coral-ink:#C23A2B;
  --pb-kind-air-ink:#317298;
  --pb-kind-do-ink:#A55269;
  --pb-kind-ground-ink:#557634;

  /* ── Daybreak: atlas land — cool slate landmasses, white coasts, a near-white sea ── */
  /* Light page. Was #F4F7FB, which put a white card at 1.075:1 against it — the
     card was held up almost entirely by a 7% shadow, and the whole site read flat.
     #E8EEF6 gives 1.17:1 while keeping --pb-muted at 4.6:1 (a darker #E4EBF4 would
     push muted text to exactly 4.5 with no headroom). */
  --pb-bg:#E8EEF6;
  --pb-map-base:#6B8099;                /* cool slate land — 3.24:1 on the sea */
  --pb-map-ocean:#DCE7F2;               /* the sea used to be 1.03:1 against the page,
                                           which made a map on a light page invisible */
  --pb-map-coast:#FFFFFF;               /* the coastline */
  --pb-map-border:#3E5470;              /* the quiet marker slate — NOT the coastline.
                                           Its only consumers are the inactive route-stop
                                           dots on trip / trips / public-trip. */
  --pb-map-pinned:#A0ECE2;              /* deeper accent — intent reads (plain hex for canvas) */
  --pb-map-pin-ink:#FFFFFF;
  --pb-map-pin-line:#2F4560;
  --pb-map-pinned-line:#0F766E;   /* 4.06:1 on the mint fill */
  --pb-map-hover:#94B3BE;               /* land lifted and cyan-tinted on hover */
  --pb-lens-b:#127D72;
  --pb-lens-c:#3E5C74;
  --pb-lens-d:#4B3BC4;
  --pb-hero-wash:#E4EFFB;               /* morning sky */
  --pb-hero-wash2:#E7ECFA;              /* dawn blue */

  /* photons behave differently at noon: shadows replace glows */
  --pp-card-glow:0 1px 2px rgba(14,20,32,.06), 0 10px 28px rgba(14,20,32,.10);
  --pp-card-glow-hover:0 2px 6px rgba(14,20,32,.08), 0 16px 36px rgba(14,20,32,.14);
  /* the palette floats over the whole page, so it needs more than a card's lift */
  --pp-overlay-shadow:0 24px 80px rgba(14,20,32,.22);
  --pp-hero-glow:0 12px 48px rgba(14,20,32,.08);
  --pp-elev-1:0 1px 2px rgba(14,20,32,.05), 0 8px 24px rgba(14,20,32,.07);

  --pp-glass:rgba(255,255,255,.72);
  --pp-glass-strong:rgba(255,255,255,.9);
  --pp-glass-border:rgba(14,20,32,.08);
  /* Photography leads in Daybreak, so the scrim under on-photo ink stays strong
     enough for #F2F6FB to clear 4.5:1 over a bright photograph. */
  --pp-scrim:linear-gradient(180deg, rgba(8,12,20,0) 0%, rgba(8,12,20,.22) 42%, rgba(8,12,20,.8) 100%);
  --pp-scrim-flat:rgba(8,12,20,.5);
}

[data-theme="light"] .ppStars{display:none}