/* =====================================================================
   brandv2.tokens.css - BALEN BRAND SYSTEM V2 token layer (flag-gated)
   =====================================================================
   Binding contract: docs/design-system/brand-v2/BRAND_V2_SPEC.md.
   Presentation ONLY. Flag: localStorage balen_brand_v2 = '1' -> pre-paint
   root class html.brand-v2. EVERY selector in this file carries
   html.brand-v2, so with the flag off ZERO rules can match. That is the
   regression proof: not "we checked", but "cannot match".

   This file is the ONLY place a raw hex is authored for V2 (spec 3).
   Component files (brandv2.home.css etc.) consume var(--k-*) / var(--bv2-*)
   and never author color literals.

   PROD-LEGAL SUBSET: ASCII only; no color mixing functions (tints are
   precomputed literals); no CSS nesting; no import chains. The two hexes
   banned by spec section 3 (C1 test) do not appear anywhere in this file.

   ARCHITECTURE (mirrors css/balen.skin.app.css, the complete precedent):
     1. LIGHT canonical palette: full --k-* re-declaration. Overriding
        --k-* re-resolves every public token (comfort.tokens.css section 2),
        every component semantic token (section 3) and every legacy alias
        (comfort.flip.css) in one move.
     2. DARK canonical palette (same mechanism, [data-theme="dark"]).
     3. Pre-Comfort color tokens that never route through --k-*
        (the balen.skin.app.css section-3 enumeration), light + dark.
     3b. Tokens consumed but defined nowhere (--surface-soft, --amber-soft,
        --ink1, --good, --bad, --danger), light + dark.
     4. NEW --bv2-* semantic namespace for V2 components (ramp, radii,
        elevation, motion, hero gradient, glass pill, avatar ring, focus).
     5. Component-material displacement: the app.html inline .hero rule
        pins a literal 4-stop gradient with !important; it is displaced
        here per-appearance exactly as balen.skin.app.css section 5.5 does.
     6. Reduced-motion guard for everything V2 animates.

   CASCADE MATH (why every token block lists TWO selectors):
     :root                                    (0,1,0) light defaults
     :root[data-theme="dark"]                 (0,2,0) comfort dark block
     html.comfort-on:root                     (0,2,1) comfort.flip aliases
     html.brand-v2:root                       (0,2,1) OUR light base
     html.comfort-on.brand-v2:root            (0,3,1) beats the flip layer
     html.brand-v2:root[data-theme="dark"]    (0,3,1) OUR dark base
     html.comfort-on.brand-v2:root[data-theme="dark"] (0,4,1) dark + flip
   Dark blocks appear AFTER light blocks in this file, so the (0,3,1) tie
   between "light + comfort-on" and "dark, comfort off" resolves to dark
   by source order, and the (0,4,1) pair wins outright. Load order versus
   comfort.flip.css is NOT relied on.

   FINANCIAL COLOR LAW: money-direction (--k-pos/--k-neg/--k-warn/
   --k-neg-tint) and category identity (--k-cat-*) keep their Comfort
   values VERBATIM in both themes. Financial meaning never re-colors.

   THEME-INVARIANT TOKENS (deliberately NEVER declared here, spec 3):
     --ink-on-white, --accent-on-white  - sit on hardcoded-white surfaces.
     --header-on, --header-on-2, --grad-hero-text, --hero-ink, --hero-ink-2,
     --pos-on-hero, --neg-on-hero, --hero-tint*  - light-on-dark-hero ink;
     the hero stays dark teal in both V2 themes, so this ink must not
     follow the page.

   AA DEVIATIONS FROM THE SPEC TABLE (spec section 3 mandates AA over the
   listed values; both measured in scratch node script, WCAG relative
   luminance):
     - light --k-text-tertiary: spec listed #6F8886 (3.79:1 on white,
       3.52:1 on page - fails AA body). Minimal darkening in the same
       teal-gray family: #5B7371 (5.08 / 4.72 / 4.56 on surface / page /
       surface-2).
     - dark --neg-on: white on --k-neg #E8756B is 2.92:1; V2 dark uses
       dark ink #2A0F0D (6.13:1).
   ===================================================================== */

/* =====================================================================
   1. LIGHT - canonical palette (--k-*)
   ---------------------------------------------------------------------
   Derived from the logo mark samples (deep #0C4848 -> mid #186C6C,
   wordmark ink #103840); authored ramp in section 4.
   ===================================================================== */
html.brand-v2:root,
html.comfort-on.brand-v2:root {
  /* surfaces */
  --k-page:#F5F7F6; --k-surface:#FFFFFF; --k-surface-2:#EEF4F2;
  --k-line:#E2EAE8; --k-header:#FFFFFF;
  /* text: exactly three levels, all AA (>=4.5) on surface + page + surface-2
     (primary 14.84, secondary 6.78, tertiary 5.08 on white) */
  --k-text-primary:#142B2E; --k-text-secondary:#46605F; --k-text-tertiary:#5B7371;
  /* one accent - Balen V2 brand teal (ramp 600 fill / 700 press).
     White on #1B6B6D is 6.23:1; on #155A5C is 7.93:1. */
  --k-accent:#1B6B6D; --k-accent-press:#155A5C; --k-accent-text:#FFFFFF; --k-accent-tint:#E3F0EF;
  /* money direction - Comfort values VERBATIM (financial meaning never re-colors) */
  --k-pos:#157A5F; --k-neg:#BE4038; --k-warn:#8A5A0F; --k-neg-tint:#F8E9E7;
  /* category identity chips - Comfort values VERBATIM (identity, NEVER status) */
  --k-cat-flight:#0E9C8E; --k-cat-ledger:#3B6EA5; --k-cat-settle:#7A5AA6; --k-cat-exchange:#B5852A;
  /* elevation - spec section 5 pairs (soft key + ambient), teal-ink shadows */
  --k-shadow-1:0 1px 2px rgba(6,42,44,0.05);
  --k-shadow-2:0 8px 24px rgba(6,42,44,0.07);
  --k-shadow-card:0 1px 2px rgba(6,42,44,0.05), 0 8px 24px rgba(6,42,44,0.07);
  /* hero gradient - spec: #0B3A3C -> #155A5C, 135deg (mid stop = ramp 800).
     Fixed light hero ink #F4FBFB measures 11.89:1 on the darkest stop and
     7.56:1 on the lightest - AA at every point. */
  --k-grad-hero:linear-gradient(135deg, #0B3A3C 0%, #104A4C 45%, #155A5C 100%);
  /* SOLID dark-teal hero surface for WHITE-text elements (.btn, row-action
     pills, wizard/reports context headers). White on #0B3A3C is 12.47:1. */
  --k-hero-surface:#0B3A3C; --k-hero-surface-2:#155A5C; --k-hero-on:#FFFFFF;
  /* legacy --accent-text = teal interactive LINK text (comfort.flip.css
     aliases it to --k-accent-press; this direct declaration at higher
     specificity pins the spec value). #135759 is 8.28:1 on white,
     7.70:1 on page, 7.09:1 on the accent tint. */
  --accent-text:#135759;
  /* soft neutral button fill (js/flight-coordination.js) */
  --btn-soft-fill:#EEF4F2;
  /* ink ON status/accent fills: light fills are all dark enough for white
     (accent 6.23, pos 5.28, neg 5.28, warn 5.92) - declared explicitly so
     V2 never depends on the Classic defaults. */
  --pos-on:#FFFFFF; --neg-on:#FFFFFF; --accent-on-fill:#FFFFFF; --warn-on:#FFFFFF;
}

/* =====================================================================
   2. DARK - canonical palette (--k-*)
   ---------------------------------------------------------------------
   Deep teal-black cabin. Elevation reads as a lighter inset edge plus a
   deeper cast shadow, never a stronger drop shadow alone (spec 5).
   ===================================================================== */
html.brand-v2:root[data-theme="dark"],
html.comfort-on.brand-v2:root[data-theme="dark"] {
  /* surfaces */
  --k-page:#0A1315; --k-surface:#10191B; --k-surface-2:#152123;
  --k-line:#1F2E30; --k-header:#0D1719;
  /* text: primary 15.29, secondary 8.98, tertiary 5.41 on surface - all AA */
  --k-text-primary:#E8EFED; --k-text-secondary:#A8BCBA; --k-text-tertiary:#7C9290;
  /* accent: brightened ramp 400 family for dark grounds. Press goes LIGHTER
     (darkening a fill on a dark ground reads as "disabled"). Dark ink
     #06282A on #4FB3AC is 6.23:1, on #63C4BC is 7.55:1. */
  --k-accent:#4FB3AC; --k-accent-press:#63C4BC; --k-accent-text:#06282A; --k-accent-tint:#14302F;
  /* money direction - Comfort dark values VERBATIM */
  --k-pos:#46C99A; --k-neg:#E8756B; --k-warn:#E8A94E; --k-neg-tint:#2A1F1E;
  /* category identity chips - Comfort values VERBATIM (comfort.tokens.css
     does not re-declare --k-cat-* in its dark block, so the light values
     are canonical in both themes) */
  --k-cat-flight:#0E9C8E; --k-cat-ledger:#3B6EA5; --k-cat-settle:#7A5AA6; --k-cat-exchange:#B5852A;
  /* elevation: 1px lighter line + subtle cast (spec 5 dark treatment) */
  --k-shadow-1:inset 0 0 0 1px rgba(232,239,237,0.06), 0 1px 2px rgba(0,0,0,0.45);
  --k-shadow-2:inset 0 0 0 1px rgba(232,239,237,0.07), 0 8px 24px rgba(0,0,0,0.50);
  --k-shadow-card:inset 0 0 0 1px rgba(232,239,237,0.06), 0 2px 8px rgba(0,0,0,0.40);
  /* hero gradient - spec dark: #08292B -> #0F4A4C. Fixed light hero ink
     #F4FBFB measures 14.71:1 / 9.52:1 on the end stops. */
  --k-grad-hero:linear-gradient(135deg, #08292B 0%, #0B3A3C 45%, #0F4A4C 100%);
  --k-hero-surface:#0B3A3C; --k-hero-surface-2:#0F4A4C; --k-hero-on:#FFFFFF;
  /* teal interactive LINK text: 8.63:1 on surface, 9.09:1 on page */
  --accent-text:#63C4BC;
  --btn-soft-fill:#152123;
  /* ink ON status/accent fills: dark-theme fills are BRIGHT, so white
     fails on accent (2.51:1), pos (2.08:1) and warn (2.06:1); they carry
     dark ink instead (6.23 / 7.50 / 8.18). neg #E8756B: white is 2.92:1,
     dark ink #2A0F0D is 6.13:1. Global white defaults live in
     comfort.tokens.css so Classic stays byte-identical; these override
     ONLY under brand-v2. */
  --pos-on:#06282A; --neg-on:#2A0F0D; --accent-on-fill:#06282A; --warn-on:#2A1A05;
}

/* =====================================================================
   3. PRE-COMFORT COLOR TOKENS NOT ALIASED TO --k-*
   ---------------------------------------------------------------------
   The balen.skin.app.css section-3 enumeration: names consumed directly
   by app.html / card-statement.css that never route through --k-*, so
   sections 1-2 alone would leave them Classic. Complete set, not a
   sample. Light first, dark after (source order resolves the (0,3,1)
   specificity tie in dark's favor).
   ===================================================================== */
html.brand-v2:root,
html.comfort-on.brand-v2:root {
  --border-subtle:#E9F0EE;
  --accent-border:rgba(27,107,109,0.24);
  --accent-glow:rgba(27,107,109,0.16);
  --accent-soft:rgba(27,107,109,0.06);
  --aqua:#1B6B6D;
  --brand-navy:#0B3A3C;
  --brass:#8A6410; --brass-soft:#FBF2DF;
  --sand:#FAF6EC; --sand-deep:#E8DDBE;
  --info:#3B6EA5; --info-bg:#E7EEF7; --info-soft:#F2F6FB; --info-text:#2C5480;
  --red:#BE4038; --red-bg:#F8E9E7; --red-lt:#F8E9E7; --red-soft:#FCF3F2;
  --warn-tint:#F7EEDC;
  --purple:#7A5AA6; --purple-lt:#EFEAF7;
  --yellow:#8A5A0F; --yellow-lt:#F7EEDC;
  /* asset-type category identity (distinct from financial --k-cat-*) */
  --cat-aircraft:#1B6B6D;  --cat-aircraft-soft:#E3F0EF;
  --cat-boat:#3B6EA5;      --cat-boat-soft:#E7EEF7;
  --cat-docs:#5E6E6C;      --cat-docs-soft:#EDF2F1;
  --cat-property:#B8492A;  --cat-property-soft:#FBE7E0;
  --cat-vehicle:#8A6410;   --cat-vehicle-soft:#FBF2DF;
  --cat-reserve:#7A5AA6;
  /* chips: ink clears AA on its own bg (amber 5.76, blue 6.69, coral 5.44,
     green 6.28, neutral 5.99) */
  --chip-amber-bg:#F7EEDC; --chip-amber-ink:#7A560E;
  --chip-blue-bg:#E7EEF7;  --chip-blue-ink:#2C5480;
  --chip-coral-bg:#F8E9E7; --chip-coral-ink:#A63A32;
  --chip-green-bg:#E5F2ED; --chip-green-ink:#116349;
  --chip-red-bg:#F8E9E7;   --chip-red-ink:#A63A32;
  --chip-neutral-bg:#EDF2F1; --chip-neutral-ink:#46605F;
  /* status + session identity (confirmed/pending track money-direction
     values verbatim; done is decorative neutral) */
  --status-confirmed:#157A5F; --status-pending:#8A5A0F; --status-done:#9FB0AE;
  --session-personal:#3B6EA5; --session-personal-bg:#E7EEF7;
  /* toast: dark-on-light for lift (white ink on #142B2E is 14.84:1) */
  --toast-bg:#142B2E; --toast-border:transparent; --toast-ink:#FFFFFF;
  /* glows / cockpit inner light */
  --shadow-glow-teal:0 6px 16px rgba(27,107,109,0.28);
  --cockpit-shadow:inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -30px 60px rgba(6,42,44,0.06);
  --hero-sun-glow:rgba(255,230,150,0.22);
  --hero-water-glow:rgba(62,155,150,0.20);
}
html.brand-v2:root[data-theme="dark"],
html.comfort-on.brand-v2:root[data-theme="dark"] {
  --border-subtle:#182527;
  --accent-border:rgba(79,179,172,0.26);
  --accent-glow:rgba(79,179,172,0.18);
  --accent-soft:rgba(79,179,172,0.08);
  --aqua:#74BDB6;
  --brand-navy:#0A1315;
  --brass:#D9A94E; --brass-soft:#2A2214;
  --sand:#F0E4C4; --sand-deep:#2A2418;
  --info:#6FA8E8; --info-bg:#12253C; --info-soft:#101E2E; --info-text:#8FC2FF;
  --red:#E8756B; --red-bg:#2A1F1E; --red-lt:#2A1F1E; --red-soft:#2A1F1E;
  --warn-tint:#2C2414;
  --purple:#A98CE0; --purple-lt:#211B33;
  --yellow:#E8B45F; --yellow-lt:#2C2414;
  /* asset-type category identity */
  --cat-aircraft:#4FB3AC;  --cat-aircraft-soft:#14302F;
  --cat-boat:#6FA8E8;      --cat-boat-soft:#12253C;
  --cat-docs:#8A9794;      --cat-docs-soft:#1B2220;
  --cat-property:#EE8365;  --cat-property-soft:#331A12;
  --cat-vehicle:#E0A94A;   --cat-vehicle-soft:#2C2414;
  --cat-reserve:#8E7BE0;
  /* chips: ink clears AA on its own bg (amber 8.12, blue 7.28, coral 7.31,
     green 9.29, neutral 7.98) */
  --chip-amber-bg:#2C2414; --chip-amber-ink:#E8B45F;
  --chip-blue-bg:#12253C;  --chip-blue-ink:#7FB4FF;
  --chip-coral-bg:#2A1F1E; --chip-coral-ink:#FF9089;
  --chip-green-bg:#10281F; --chip-green-ink:#57DFA5;
  --chip-red-bg:#2A1F1E;   --chip-red-ink:#FF9089;
  --chip-neutral-bg:#182022; --chip-neutral-ink:#A9B7B5;
  /* status + session identity */
  --status-confirmed:#46C99A; --status-pending:#E8A94E; --status-done:#5F6A69;
  --session-personal:#6FA8E8; --session-personal-bg:#12253C;
  /* toast must LIFT off an already-dark page: lighter than page, bright ink */
  --toast-bg:#1B282A; --toast-border:#2A3B3D; --toast-ink:#E8EFED;
  /* glows / cockpit inner light */
  --shadow-glow-teal:0 6px 16px rgba(79,179,172,0.30);
  --cockpit-shadow:inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -30px 60px rgba(0,0,0,0.35);
  --hero-sun-glow:rgba(255,230,150,0.16);
  --hero-water-glow:rgba(116,189,182,0.24);
}

/* =====================================================================
   3b. TOKENS THAT ARE CONSUMED BUT DEFINED NOWHERE
   ---------------------------------------------------------------------
   Modules render var(--x, <literal>) where --x has no declaration, so the
   literal always wins and the surface can never follow the theme
   (balen.skin.app.css section 3b). Fixed under brand-v2 only; declaring
   them globally would change what Classic renders today.
     --surface-soft  js/jit-wizards.js route-suggestion panels
     --amber-soft    js/communication.js callouts
     --ink1          js/inbox.js logbook labels [not --ink-1]
     --bad / --good  js/reservation-coordinator.js, js/jit-wizards.js
     --danger        js/tasks.js, js/ownership-setup.js, js/expenses.js
   ===================================================================== */
html.brand-v2:root,
html.comfort-on.brand-v2:root {
  --surface-soft:#EEF4F2; --amber-soft:#F7EEDC;
  --ink1:#142B2E;
  --good:#157A5F; --bad:#BE4038; --danger:#BE4038;
}
html.brand-v2:root[data-theme="dark"],
html.comfort-on.brand-v2:root[data-theme="dark"] {
  --surface-soft:#152123; --amber-soft:#2C2414;
  --ink1:#E8EFED;
  --good:#46C99A; --bad:#E8756B; --danger:#E8756B;
}

/* =====================================================================
   4. V2 SEMANTIC NAMESPACE (--bv2-*)
   ---------------------------------------------------------------------
   What brandv2.home.css / brandv2.workspace.css / brandv2.askbalo.css and
   js/brand-v2*.js consume. Raw hexes for V2 live HERE, never in the
   component files. Theme-shared values are declared once in the light
   block (custom properties inherit; the dark block overrides only the
   color-bearing names).
   ===================================================================== */
html.brand-v2:root,
html.comfort-on.brand-v2:root {
  /* ---- brand ramp (spec section 3 table; reference + component use) ---- */
  --bv2-teal-950:#062A2C;  /* deepest ink / hero end */
  --bv2-teal-900:#0B3A3C;  /* hero gradient start */
  --bv2-teal-800:#104A4C;  /* hero mid */
  --bv2-teal-700:#155A5C;  /* logo deep / accent-press */
  --bv2-teal-600:#1B6B6D;  /* logo mid / PRIMARY ACCENT (fills) */
  --bv2-teal-500:#24807E;  /* secondary fills */
  --bv2-teal-400:#3E9B96;  /* dark-mode accent base */
  --bv2-teal-300:#74BDB6;  /* dark-mode accents */
  --bv2-teal-200:#A8D6D1;  /* tints */
  --bv2-teal-100:#D5EBE8;  /* tint surfaces */
  --bv2-teal-50:#EEF6F5;   /* wash */

  /* ---- shape (spec section 5) ---- */
  --bv2-r-card:16px;
  --bv2-r-sheet:24px;   /* sheets/modals, top corners */
  --bv2-r-chip:10px;
  --bv2-r-btn:12px;
  --bv2-r-hero:20px;    /* hero media */

  /* ---- elevation (spec section 5 pairs) ---- */
  --bv2-shadow-card:0 1px 2px rgba(6,42,44,0.05), 0 8px 24px rgba(6,42,44,0.07);
  --bv2-shadow-card-hover:0 2px 4px rgba(6,42,44,0.06), 0 14px 32px rgba(6,42,44,0.10);
  --bv2-surface-raised:#FFFFFF;   /* hover-lift surface; dark goes subtly lighter */

  /* ---- motion (spec section 5; guard in section 6 below) ---- */
  --bv2-dur-micro:160ms;
  --bv2-dur-sheet:240ms;
  --bv2-ease:cubic-bezier(.2,.7,.3,1);

  /* ---- hero gradient (single source: --k-grad-hero above) ---- */
  --bv2-grad-hero:var(--k-grad-hero);

  /* ---- glass pill (live chips ON PHOTOGRAPHY - theme-invariant: the
     ground is the photo + the localized overlay band, never the page.
     Never a filter on the image itself; photography law applies.) ---- */
  --bv2-glass-bg:rgba(8,20,22,0.42);
  --bv2-glass-line:rgba(255,255,255,0.25);
  --bv2-glass-ink:#FFFFFF;
  --bv2-glass-blur:10px;

  /* ---- Balo avatar chips (spec section 6: circular, 28-44px) ---- */
  --bv2-avatar-sm:28px;
  --bv2-avatar-md:36px;
  --bv2-avatar-lg:44px;
  --bv2-avatar-ring:0 0 0 2px rgba(27,107,109,0.20);

  /* ---- focus visibility (2px accent outline, 2px offset) ---- */
  --bv2-focus-ring:#1B6B6D;
  --bv2-focus-ring-w:2px;
  --bv2-focus-ring-offset:2px;
}
html.brand-v2:root[data-theme="dark"],
html.comfort-on.brand-v2:root[data-theme="dark"] {
  /* dark elevation = 1px lighter line + subtle lighter surface (spec 5) */
  --bv2-shadow-card:inset 0 0 0 1px rgba(232,239,237,0.07), 0 1px 2px rgba(0,0,0,0.45);
  --bv2-shadow-card-hover:inset 0 0 0 1px rgba(232,239,237,0.10), 0 6px 20px rgba(0,0,0,0.50);
  --bv2-surface-raised:#172426;
  --bv2-avatar-ring:0 0 0 2px rgba(79,179,172,0.30);
  --bv2-focus-ring:#4FB3AC;
}

/* =====================================================================
   5. COMPONENT-MATERIAL DISPLACEMENT
   ---------------------------------------------------------------------
   The .hero band at the top of every non-Home tab hardcodes Classic's
   4-stop teal gradient with !important in app.html's inline stylesheet,
   so no token can reach it (balen.skin.app.css section 5.5 precedent).
   Left alone it reads as Classic aqua bleeding through V2. Only the one
   paint property is replaced; geometry, radius, shadow, z-index and the
   band's FIXED light ink (#F4FBFB, also pinned inline) are untouched.
   Measured against #F4FBFB: light stops 11.89:1 -> 7.56:1, dark stops
   14.71:1 -> 9.52:1 - every point of both gradients clears AA.
   Specificity: (0,1,1) / (0,2,1) + !important beats the inline sheet's
   .hero (0,1,0) + !important regardless of load order.
   ===================================================================== */
html.brand-v2 .hero {
  background:linear-gradient(135deg, #0B3A3C 0%, #104A4C 45%, #155A5C 100%) !important;
}
html.brand-v2[data-theme="dark"] .hero {
  background:linear-gradient(135deg, #08292B 0%, #0B3A3C 45%, #0F4A4C 100%) !important;
}

/* =====================================================================
   6. ACCESSIBILITY GUARDS
   ---------------------------------------------------------------------
   Focus visibility for V2 surfaces + reduced-motion law: every V2
   animation/transition (all keyed to --bv2-dur-*) collapses when the
   user asks for reduced motion. Scoped to html.brand-v2 like everything
   else in this file.
   ===================================================================== */
html.brand-v2 :focus-visible {
  outline:var(--bv2-focus-ring-w) solid var(--bv2-focus-ring);
  outline-offset:var(--bv2-focus-ring-offset);
}
@media (prefers-reduced-motion: reduce) {
  html.brand-v2:root,
  html.comfort-on.brand-v2:root {
    --bv2-dur-micro:0.001ms;
    --bv2-dur-sheet:0.001ms;
  }
  html.brand-v2 *, html.brand-v2 *::before, html.brand-v2 *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

/* =====================================================================
   7. WORKSPACE NAV EXCEPTION (critique round 1, P1)
   ---------------------------------------------------------------------
   Section 5 displaces the app.html .hero gradient for the V2 brand band,
   but the WORKSPACE nav (.hero--nav) is deliberately page-colored chrome
   under Comfort (premium.css) with --text-primary title ink. Because the
   V2 sheets load after premium.css, the section-5 rule was repainting
   the nav bar teal while its title kept page ink (1.3:1 -- invisible).
   Restore the page-colored nav under V2; the title/icons then inherit
   the correct Comfort treatment untouched.
   ===================================================================== */
html.brand-v2 .hero--nav,
html.brand-v2[data-theme="dark"] .hero--nav {
  background: var(--page) !important;
}