/* ============================================================
   WeatherWindow.AI — Foundation tokens, fonts, and shared components
   Extracted from App/css/styles.css per DESIGN_SYSTEM_SPLASH.md §1.
   Splash-only token extensions live in styles-splash.css.
   ============================================================ */

/* ─── Self-hosted fonts (CLO #21 / #11; SPLASH F1) ─────────────
   Inter and Source Code Pro served from this origin to eliminate
   the IP exfiltration to Google's font CDN. `local()` is cheap
   insurance — if the user has the font installed, the download
   is skipped entirely.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  src: local('Inter'), local('Inter-Regular'),
       url('fonts/InterVariable.woff2') format('woff2-variations'),
       url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans'),
       url('fonts/OpenSans-Variable.woff2') format('woff2-variations'),
       url('fonts/OpenSans-Variable.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Code Pro';
  src: local('Source Code Pro'), local('SourceCodePro-Regular'),
       url('fonts/SourceCodePro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Code Pro';
  src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'),
       url('fonts/SourceCodePro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Code Pro';
  src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'),
       url('fonts/SourceCodePro-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ─── Foundation tokens — Dark theme (primary) ────────────────
   Identical to App/css/styles.css :root for the subset the splash uses.
   ============================================================ */
:root {
  --bg:          #08111f;
  --bg-2:        #0d1e35;
  --surface:     #0f2444;
  --surface-2:   #152d52;
  --border:      #1e3f6b;
  --border-dim:  rgba(255,255,255,0.06);

  --accent:      #00b4d8;
  --accent-2:    #0096c7;
  --accent-wash: rgba(0,180,216,0.15);

  --success:     #2ec4b6;
  --warning:     #f4a261;
  --danger:      #e63946;

  --text:          #caf0f8;
  --text-dim:      #7fb3c8;
  --text-dark:     #4a7fa0;
  --text-on-accent:#000;

  --radius:    10px;
  --radius-sm:  6px;
  --radius-lg: 16px;
  --shadow:    0 4px 20px rgba(0,0,40,0.5);
  --shadow-lg: 0 10px 40px rgba(0,0,40,0.6);
  /* Right/left edge cue on a horizontally scrolling container, so a wide
     table reads as "swipe for more" instead of "clipped". The article CSS
     chain never loads the demo stylesheet that otherwise carries this token.
     LIGHT on the dark theme, unlike the app's rgba(0,0,0,0.28). The article
     surface is #0c2138, so a black shadow has almost no luminance contrast
     against it — proved by painting the cue red and confirming it rendered
     exactly where intended while remaining invisible at its real colour. On
     a dark surface the contrasting edge is a light one; the light theme
     below keeps the conventional dark value. */
  --scroll-shadow: rgba(255,255,255,0.26);

  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Source Code Pro', 'SF Mono', 'Menlo', monospace;

  --fs-2xs: 0.60rem;
  --fs-xs:  0.72rem;
  --fs-sm:  0.82rem;
  --fs-base:0.95rem;
  --fs-md:  1.05rem;
  --fs-lg:  1.3rem;
  --fs-xl:  1.8rem;
  --fs-2xl: 2.4rem;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  --brand-navy:      #0a2a5e;
  --brand-navy-deep: #051a3d;
  --brand-gold:      #f4b942;

  /* ── Semantic tints + verdict borders ──────────────────────────────────
     The passage-demo Report/Map render inside open shadow roots that mirror
     App/css/styles.css. CSS custom properties inherit across the shadow
     boundary from this host :root, but `:root` rules inside the mirrored
     stylesheet do NOT apply within a shadow tree — so these tokens must be
     defined HERE or the badge/alert backgrounds + borders resolve empty.
     Kept identical to App/css/styles.css :root. */
  --border-mid:  rgba(255,255,255,0.15);
  --dep-pin:     #22c55e;

  --success-bg:  rgba(46,196,182,0.08);
  --warning-bg:  rgba(244,162,97,0.08);
  --danger-bg:   rgba(230,57,70,0.08);
  --accent-bg:   rgba(0,180,216,0.08);

  --success-border: rgba(46,196,182,0.4);
  --warning-border: rgba(244,162,97,0.4);
  --danger-border:  rgba(230,57,70,0.4);
  --accent-border:  rgba(0,180,216,0.4);

  --overlay-scrim:        rgba(0,0,0,0.48);
  --overlay-scrim-strong: rgba(0,0,0,0.75);

  --port-color: #e05060;
  --port-bg:    rgba(230,57,70,0.22);
  --stbd-color: var(--success);
  --stbd-bg:    rgba(46,196,182,0.18);

  --map-popup-bg:     #0d1f3c;
  --map-popup-text:   #c8e0f8;
  --map-popup-border: #2a6a9a;

  --synoptic-color: #4caf50;
  --synoptic-bg:    rgba(76,175,80,0.08);

  --bg-overlay: rgba(8,17,31,0.85);

  --gennaker-color: #7edcff;
  --gennaker-bg:    rgba(120,220,255,0.18);
  --parasail-color: #c090ff;
  --parasail-bg:    rgba(160,100,255,0.20);

  --sun-color:       #d4893a;
  --moon-color:      #e2d4b0;

  --wave-color:      #7eb8f7;
  --lightning-color: #f5c518;
  --tide-color:      #5bc8e8;

  --table-row-even: #111827;
  --table-row-odd:  #192033;
}

/* ─── Foundation tokens — Light theme override ────────────────
   Foundation §1.6 — `html.ww-light` only (SPLASH F2).
   ============================================================ */
html.ww-light {
  --bg:            #f6f9fc;
  --bg-2:          #ffffff;
  --surface:       #ffffff;
  --surface-2:     #eef3f9;
  --border:        #d9e2ec;
  --border-dim:    rgba(10,42,94,0.08);
  --accent:        #0a2a5e;
  --accent-2:      #123a78;
  --accent-wash:   rgba(10,42,94,0.08);
  --text:          #0a2a5e;
  --text-dim:      #486581;
  --text-dark:     #829ab1;
  --text-on-accent:#ffffff;
  --shadow:        0 2px 10px rgba(10,42,94,0.08);
  --shadow-lg:     0 10px 30px rgba(10,42,94,0.12);
  --brand-gold:    #d99820;
  --scroll-shadow: rgba(33,41,51,0.18);
}

/* ─── Reset + global typography ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Root font-size anchors the rem unit — every other type size flows from this.
   The `16px` here is the rem base, not a typography choice; it is the value
   foundation tokens (--fs-base = 0.95rem, etc.) are calibrated against. */
html { font-size: 16px; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
h2 { font-size: var(--fs-xl);  font-weight: 700; letter-spacing: -0.005em; line-height: 1.2; color: var(--accent); }
h3 { font-size: var(--fs-lg);  font-weight: 700; line-height: 1.25; }
h4 { font-size: var(--fs-md);  font-weight: 600; line-height: 1.3; }
p  { font-size: var(--fs-base); line-height: 1.65; }
code, kbd, .mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a { color: inherit; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Shared buttons (foundation §3.1) ─────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  line-height: 1;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn.small { padding: 6px 12px; font-size: var(--fs-xs); min-height: 32px; }
.btn-primary { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--accent-2); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 44px;
  font-weight: 500;
}
.btn-ghost:hover { color: var(--accent); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Shared verdict card (.vcard, .vbadge) — foundation §3.4 ─
   Used standalone in the samples section and as the splash hero verdict card
   (#hero-vcard; elevated shadow + persistent glow in styles-splash.css §6.6).
   ============================================================ */
.vcard {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: border-color 250ms ease-out, background-color 250ms ease-out;
}
.vcard::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.vcard.go::before       { background: var(--success); }
.vcard.caution::before  { background: var(--warning); }
.vcard.marginal::before { background: var(--warning); }
.vcard.nogo::before     { background: var(--danger); }
.vcard.divert::before   { background: var(--danger); }

.vbadge {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  border: 3px solid;
  background: var(--bg);
}
.vbadge .glyph { font-size: var(--fs-lg); line-height: 1; }
.vbadge .word  { font-size: var(--fs-xs); margin-top: 4px; letter-spacing: 0.08em; }
.vcard.go       .vbadge { color: var(--success); border-color: var(--success); }
.vcard.caution  .vbadge { color: var(--warning); border-color: var(--warning); }
.vcard.marginal .vbadge { color: var(--warning); border-color: var(--warning); }
.vcard.nogo     .vbadge { color: var(--danger);  border-color: var(--danger);  }
.vcard.divert   .vbadge { color: var(--danger);  border-color: var(--danger);  }

.vcard h4 {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
  text-wrap: balance;
}
.vcard p.r {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 0 0 14px;
  line-height: 1.5;
}
.vmetrics { display: flex; gap: var(--s-6); font-family: var(--font-mono); }
.vmetric .lbl {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dark);
  display: block;
}
.vmetric .val {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 600;
}

/* Verdict transition fade (carousel) */
.vcard-content { transition: opacity 120ms ease-in; }
.vcard-content.updating { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .vcard, .vcard-content { transition: none; }
}