/* ============================================================
   WeatherWindow.AI — Redesign 2 · demo-theme.css
   ============================================================
   Re-themes the ported Sample-Report/Map demo (js/passage-render/*,
   css/passage-demo-app.css) to this page's "Ocean-Instrument Editorial"
   palette instead of the app's own navy/cyan theme.

   Why this file has to exist: passage-demo-app.css is a byte-exact
   mirror of the live app's stylesheet (never hand-edit it — see
   website/CLAUDE.md). Its component rules read color via
   var(--bg), var(--text), var(--accent), etc. Its own `:root { ... }`
   block that DEFINES those names is injected straight into a Shadow
   DOM root (see js/passage-render/demo.js injectShadowStyles()) — and
   `:root` never matches anything inside a shadow tree, so that block
   is inert there. What actually resolves those var() calls inside the
   shadow root is ordinary custom-property INHERITANCE from this
   document's real :root, which shadow boundaries do not block. The
   same var() names are also used by the light-DOM demo chrome in
   demo-chrome.css, which needs these defined too.

   Structure: block 1 is a byte-for-byte copy of passage-demo-app.css's
   own :root token values (a safety net — every token the ported CSS
   references gets a real value, matching original behavior exactly).
   Block 2 re-declares the brand-relevant subset (surfaces, borders,
   accent, verdict colors, text, type, radius, map-popup) mapped onto
   this page's own tokens.css values — later same-selector declarations
   win, so block 2 overrides block 1 for just those names. Left alone:
   spacing (--s-*), type scale (--fs-*), and weather-semantic data
   colors (squall/lightning/wave/tide/sun/moon/sail-badges/nautical
   port-starboard) — those are layout mechanics and meteorological
   meaning, not brand color.
   ============================================================ */

:root {
  /* ---- Block 1: literal defaults, copied from passage-demo-app.css ---- */
  --bg:          #08111f;
  --bg-2:        #0d1e35;
  --surface:     #0f2444;
  --surface-2:   #152d52;
  --border:      #1e3f6b;
  --border-mid:  rgba(255,255,255,0.15);
  --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;
  --dep-pin:     #22c55e;

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

  --radius:    10px;
  --radius-sm:  6px;
  --radius-lg: 14px;
  --shadow:    0 4px 20px rgba(0,0,40,0.5);
  --shadow-lg: 0 10px 40px rgba(0,0,40,0.6);

  --font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', '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;

  --card:  #0f2444;

  --notice-h: 0px;

  --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-gold: #f4b942;

  --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);
  --scroll-shadow:        rgba(0,0,0,0.28);

  --port-color: #e05060;
  --port-bg:    rgba(230,57,70,0.22);
  --stbd-color: #2ec4b6;
  --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;

  --sea-char:        #3a9ce2;
  --sea-char-bg:     rgba(58,156,226,0.14);
  --sea-char-border: rgba(58,156,226,0.40);

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

  /* ---- Block 2: brand overrides — mapped onto this page's own tokens ---- */
  /* biome-ignore lint/suspicious/noDuplicateCustomProperties: deliberate. Block 1
     above is a complete copy of the passage-demo-app.css token set; Block 2 here
     overrides a subset of it. The Block 1 entries these shadow are inert (one
     :root rule — the later declaration always wins), and are kept so a future
     re-sync against the source file stays a clean diff instead of a manual
     reconciliation. NOT a runtime fallback: if a brand token were missing,
     var(--ink) would compute to guaranteed-invalid and fall through to
     unset/inherit — it would NOT fall back to the Block 1 literal. Deleting
     either declaration is wrong; see tests_live/test_css_intentional_duplicates.py */
  --bg:            var(--ink);
  --bg-2:          var(--ink-2);
  --bg-overlay:    color-mix(in srgb, var(--ink) 85%, transparent);
  --card:          var(--panel);
  --surface:       var(--panel);
  --surface-2:     var(--panel-2);

  --border:        var(--line-2);
  --border-mid:    var(--line-3);
  --border-dim:    var(--line);

  /* Brass replaces cyan as the primary UI accent; cyan stays reserved
     for instrument-data numerics elsewhere on the page. */
  --accent:        var(--brass);
  --accent-2:      var(--brass-deep);
  --accent-wash:   var(--brass-wash);
  --accent-bg:     var(--brass-wash);
  --accent-border: var(--brass-hair);

  /* Same hues this page already uses for GO / CAUTION / NO-GO. */
  --success:        var(--go);
  --success-bg:     var(--go-bg);
  --success-border: var(--go-line);
  --warning:        var(--caution);
  --warning-bg:     var(--caution-bg);
  --warning-border: var(--caution-line);
  --danger:         var(--nogo);
  --danger-bg:      var(--nogo-bg);
  --danger-border:  var(--nogo-line);
  --dep-pin:        var(--go);
  --stbd-color:     var(--go);
  --stbd-bg:        var(--go-bg);

  --text:           var(--paper);
  --text-dim:       var(--dim);
  --text-dark:      var(--mute);
  --text-on-accent: var(--on-brass);

  --font-sans: var(--sans);
  /* NOT var(--mono) — the embedded Passage Report/Map demo must keep
     rendering exactly like the real app, which still ships JetBrains
     Mono. This page's own --mono switched to Source Code Pro
     (2026-07-06); without this override that swap would silently leak
     into the shadow-DOM demo and the light-DOM chrome (both read
     var(--font-mono), which inherits through the shadow boundary). */
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  --radius:    var(--r);
  --radius-sm: var(--r-xs);
  --radius-lg: var(--r-lg);

  --brand-gold: var(--brass-bright);

  /* Leaflet boat popup — escapes the shadow tree into the light-DOM
     portal. Was pinned to fixed navy hex values; mapped here to match
     the recolored demo instead. */
  --map-popup-bg:     var(--panel-2);
  --map-popup-text:   var(--paper);
  --map-popup-border: var(--brass-hair);

  --table-row-even: var(--ink-2);
  --table-row-odd:  var(--band);
}