/* ============================================================================
   BRAND THEME — bernazah (جمعية البر الخيرية بتلعة نزا)

   THIS FILE IS THE ENTIRE REBRAND SURFACE.

   Fork of the `beralmramyh` pack (CLAUDE.md §9 / CLONING.md step 4). Nothing under
   the five .NET projects, `BerNazah.AdminUI/` or `wwwroot/css/` differs from
   upstream — `site.css` consumes `var(--token)` exclusively, so the whole visual
   difference between this association's site and المرامية's lives in this file plus
   `brand.json` and the three images beside them.

   ── WHERE THIS PALETTE COMES FROM: THE LOGO ────────────────────────────────
   The association has no brand book, so the palette is measured off its own mark
   (`Docs/source/legacy/images/logo2.png`, 196×88). Sampled, excluding greys:

     emblem   #9CCC30  hsl( 78, 62%, 49%)   the fresh lime of the leaves
     emblem   #249C48  hsl(138, 63%, 38%)   the emerald of the «البر» roundel
     wordmark #307824  hsl(111, 54%, 31%)   «جمعية البر الخيرية»
     wordmark #B48430  hsl( 38, 58%, 45%)   the bronze on «بتلعة نزا»

   The ramp below is anchored on the emblem's EMERALD — and since 2026-09-05 it takes
   that emerald's OWN hue AND saturation, hsl(138, 63%, L), varying only lightness.
   The lime stays the signature accent and the bronze the warm one.

   ── WHY THE RAMP WAS LIGHTENED (owner instruction, 2026-09-05) ─────────
   The first version held hue at 146° and ran L from 11% to 26%. Beside the logo it
   read as a near-black FOREST green while the mark itself is a bright emerald: the
   deep band was #125E33 against an emblem of #249C48, and the owner's note was just
   «change colors, near logo colors». They were right — the page's grounds sat four to
   eight lightness steps below the thing they were supposed to echo.

   Every ground therefore moved ~5 steps lighter and 8° of hue onto the emblem:

     --green-950  #08301B → #114B22      --green     #15703C → #1B7937
     --green-900  #0C4526 → #16602C      --green-700 #0F5931 → #16622D
     --green-800  #125E33 → #197033

   THE COST, STATED. Contrast falls — white on the deep band goes 7.85 → 6.16 and the
   primary as text goes 6.15 → 5.47. Both still clear AA, and the LIGHTEST value in
   each slot was chosen by SEARCH against the real pairings rather than by eye:
   --green-800 is capped by --on-deep-muted (.82 white) needing 4.5 on it, --green-900
   by --on-deep-faint (.72 white), and --green by its own use as link text on --stone.
   One step lighter on any of the three fails. That is why this ramp stops here and
   not at the emblem's literal #249C48, which carries white at only 3.47:1 and could
   not be a band ground at all.

   Hue separation from المرامية (#497C1D, hue 92) is now 46° — down from 54°, still
   far more than the burgundy experiment bought, and now measured off this
   association's own mark rather than chosen to differ from someone else's.

   ── A CORRECTION, AND WHY THIS FILE NO LONGER SAYS «BURGUNDY» ──────────────
   The first version of this theme was burgundy (#8E1519) + gold. Its stated source
   was the legacy site's own hand-written home-page CSS — the statistics band, which
   uses #7b0d0d and #ffc107 — and its stated justification was that burgundy stopped
   this fork reading as a recoloured copy of المرامية's green.

   Both halves were wrong:

     1. THERE IS NO RED IN THE LOGO. Measured: of 17,248 pixels, exactly 0 are
        reddish (r>90, g<70, b<70). The burgundy's only provenance was one inline
        <style> block on one legacy page — almost certainly a pasted snippet, not a
        brand decision. A site whose palette contradicts its own mark reads as a
        template nobody finished.
     2. THE DIFFERENTIATION ARGUMENT DID NOT NEED IT. المرامية's primary is #497C1D,
        hue 92 — a dark, warm OLIVE. This association's emblem is emerald at hue 138
        with a lime at 78; it contains no olive at all. Anchoring here puts **54° of
        hue** between the two associations, which is more separation than the
        burgundy bought, and it costs nothing to the logo.

   An earlier revision of this comment also claimed the logo was «the same 1430-era
   template mark that المرامية's site also uses». That was false: the two logos are
   different designs (المرامية's is a circular badge with a wheat sheaf and water
   waves; this one is a leaf roundel). The ALBUM was byte-identical between the two
   sites — see Docs/07-open-questions.md OQ-5 — and that finding was wrongly
   generalised to the logo.

   ── CONTRAST BUDGET (WCAG AA — every figure below was COMPUTED, none estimated.
      Recompute the whole table if any value changes.) ────────────────────────
     --ink        #18211C on white ........ 16.49:1  ✓ body
     --green-950  #114B22 on white ........ 10.23:1  ✓ deepest ground — the footer
     --green-900  #16602C on white .........  7.65:1  ✓ headings · header · masthead
     --green-900  on --stone-50 ............  7.21:1  ✓
     --green-700  #16622D on white .........  7.45:1  ✓ hover / pressed / --info
     white ON --green-800 #197033 ..........  6.16:1  ✓ the deep band ground
     --on-deep-muted ON --green-800 ........  4.73:1  ✓ (white at .82)
     --on-deep-muted ON --green-900 ........  5.74:1  ✓ (white at .82)
     --on-deep-faint ON --green-900 ........  4.83:1  ✓ (white at .72)
     --on-deep-faint ON --green-950 ........  6.14:1  ✓ (white at .72)
     white        ON --green-900 ...........  7.65:1  ✓ masthead / donate band
     white        ON --green-950 ........... 10.23:1  ✓ footer
     --green      #1B7937 on white .........  5.47:1  ✓ links, primary button fill
     --green      #1B7937 on --stone-50 ....  5.16:1  ✓ eyebrows / prose links
     --green      #1B7937 on --stone .......  4.70:1  ✓
     white        ON --green ...............  5.47:1  ✓ button label on the fill
     --green-200  #CCEAD5 vs white ..........  1.29:1   tile separation
     --brand-strong ON --green-200 ..........  5.94:1  ✓ glyph inside a glyph tile

     ⚠ --on-deep-faint is 4.06:1 on --green-800 and is therefore NOT USED THERE.
       On this lighter ramp it survives only on --green-900 and --green-950; the
       statistics band (--green-800) uses --on-deep-muted for its labels.
     --ink-muted  #59645C on white ..........  6.17:1  ✓ / on --stone 5.30 ✓
     --bronze-ink #7A5514 on white ..........  6.69:1  ✓ THE WARM TEXT COLOUR
     --bronze-ink on --bronze-wash ..........  5.97:1  ✓
     --chip-neutral-fg #46514A on --stone-50   7.80:1  ✓
     --st-submitted-fg #3C463F on its bg ....  8.60:1  ✓
     --ok         #0B6B5E on white ..........  6.40:1  ✓ / on its wash 5.64 ✓
     --warn       #7A4B10 on white ..........  7.39:1  ✓ / on its wash 6.46 ✓
     --danger     #B3261E on white ..........  6.54:1  ✓ / on its wash 5.72 ✓
     --lime       #9CCC30 on white ..........  1.89:1  ✗  DECORATIVE ONLY — NEVER TEXT
     --lime       #9CCC30 on --surface-deep ..  3.26:1  ✗  barred on the dark ground too
     --green-900  ON a --lime ground .........  4.04:1  ✗  and lime is never a SURFACE either
     --bronze     #B48430 on white ..........  3.34:1  ✗  DECORATIVE ONLY — NEVER TEXT
     --green-300  #59C579 on white ..........  2.17:1  ✗  DECORATIVE ONLY — NEVER TEXT
     --ink-faint  #8C978F on white ..........  3.03:1  ✗  disabled / separator only

   THE WARM-ACCENT RULE. --bronze is 3.34:1 on white and --lime is 1.89:1, so neither
   can ever carry a word. --bronze-ink (#7A5514) is the warm colour that can, at
   6.69:1. Use --bronze and --lime only for rules, dots, emblems and fills.

   ── THE ONE COLLISION WORTH KNOWING ABOUT ──────────────────────────────────
   A GREEN brand collides with --ok, not with --danger. Upstream's --ok is #2F6B3A
   (hue 131) — only 15° from this primary, so an «تمت الموافقة» pill would have read
   as ordinary brand chrome. --ok is therefore moved to a TEAL green, #0B6B5E
   (hue 172): 26° off the brand, still unmistakably "good", and 6.40:1 on white.
   Do NOT "harmonise" it back toward the brand green — that is the whole point of it.
   (--danger at hue 3 and --warn at hue 33 are far from the brand and need no such
   treatment. --warn and --bronze-ink sit close to each other, as gold-ink and warn
   do upstream; --warn is admin-only, so they never meet on a page.)

   A fork of THIS fork must redo the whole arithmetic for its own palette.
   ============================================================================ */

:root {
  /* ── Identity palette ───────────────────────────────────────────────────── */
  /* A RAMP, not five spot colours. Hue held at ~146° end to end. */
  --green-950: #114B22;   /* deepest ground — the footer       hsl(138,63%,18%)  10.23:1 */
  --green-900: #16602C;   /* headings · header · masthead      hsl(138,63%,23%)   7.65:1 */
  /* The DEEP GROUND — hero, closing CTA band, footer. Light enough to read as a rich
     EMERALD at full-band scale rather than as near-black, and still dark enough to
     carry the whole on-deep text scale: white 7.85:1 · muted 5.87:1 · faint 4.93:1.
     --lime falls to 4.15:1 here and --green-300 lower still, so both stay barred as
     text on the dark ground — unchanged policy from upstream. */
  --green-800: #197033;   /* deep band ground                  hsl(138,64%,27%)   6.16:1 */
  /* PRIMARY. The emblem's emerald (#249C48, hsl 138/63/38) darkened to 26% lightness
     and held at 146° so it clears AA as TEXT on white and on both stone grounds,
     while still reading as the same green as the roundel in the logo beside it. */
  --green:     #1B7937;   /* PRIMARY — buttons, links, rules   hsl(138,63%,29%)   5.47:1 */
  --green-700: #16622D;   /* hover / pressed / --info          hsl(138,63%,24%)   7.45:1 */
  --green-300: #59C579;   /* decorative only — 2.17:1, NEVER text                       */
  --green-200: #CCEAD5;   /* icon tiles, glyph tiles, media placeholders                */
  --green-100: #EEF8F2;   /* --info-wash, selected rows, soft panels                    */
  /* The emblem's own lime, used at exactly ONE place in the design: --rule-color, the
     eyebrow / statistic rule. It is the brightest note in the mark and the thing that
     makes this palette unmistakably THIS association's rather than a generic green.
     1.89:1 — it may never be text, and site.css only ever draws it as a 44×2 bar. */
  --lime:       #9CCC30;
  --bronze:     #B48430;  /* the wordmark's bronze — decorative only, 3.34:1            */
  --bronze-ink: #7A5514;  /* the warm TEXT colour — 6.69:1 on white                     */
  --bronze-wash:#FAF1DF;
  /* A cool STONE ground, not upstream's warm olive-beige sand: beside an emerald a
     yellow-beige turns the whole page swampy, and the two sites must not share a
     ground. This one is a barely-green grey that lets the emerald stay the colour. */
  --stone:      #EAEFE9;
  --stone-50:   #F6F9F5;

  /* ── Semantic roles ─────────────────────────────────────────────────────── */
  /* site.css only ever names these. Swapping the identity palette above without
     touching this block is what makes a rebrand one file. */
  --brand:            var(--green);
  --brand-strong:     var(--green-900);
  --brand-hover:      var(--green-700);
  --brand-decor:      var(--green-300);   /* borders/fills — never text */
  --accent:           var(--bronze);      /* rules/emblems — never text */
  --accent-ink:       var(--bronze-ink);
  --accent-wash:      var(--bronze-wash);

  --paper:            #FFFFFF;
  --surface-soft:     var(--stone-50);
  --surface-strong:   var(--stone);
  --surface-deep:     var(--green-800);

  --ink:              #18211C;
  --ink-muted:        #59645C;
  --ink-faint:        #8C978F;
  --on-deep:          #FFFFFF;
  --on-deep-muted:    rgba(255, 255, 255, .82);
  --on-deep-faint:    rgba(255, 255, 255, .72);

  --line:             #E2E8E1;
  --line-soft:        #EDF1EC;
  /* A hairline that still reads when it sits ON --surface-soft / --surface-strong,
     where --line disappears. Used by table heads and the neutral file chip. */
  --line-strong:      #CFD8CE;
  --line-deep:        rgba(255, 255, 255, .18);
  --row-hover:        #FAFCF9;
  --surface-hover:    #EDF2EB;   /* hover fill for rows/tiles sitting ON --surface-soft */

  /* Info role — brand-family, never blue: a blue here would be the only non-brand
     hue on the page. 8.42:1 on white. */
  --info:             var(--green-700);
  --info-wash:        var(--green-100);
  --info-line:        #CFE7DA;

  /* ── Semantic scale. FOUR roles, each a fg/wash/line triple in the same shape.
     Confined to STATE: form validation, alerts, and the admin's status pills.
     See the collision note in the header before touching --ok. */
  --danger:           #B3261E;   /* 6.54:1 on white · 5.72:1 on its wash */
  --danger-wash:      #FDECEA;
  --danger-line:      #F2C7C3;
  --danger-ink:       #4A100C;
  --danger-hover:     #8E1E17;
  /* TEAL, deliberately — see the collision note. 26° off the brand green. */
  --ok:               #0B6B5E;   /* 6.40:1 on white · 5.64:1 on its wash */
  --ok-wash:          #E4F4F1;
  --ok-line:          #B6DDD6;
  /* The one amber, and a STATE colour rather than a brand hue: it exists so that
     «بحاجة إلى بيانات» (the applicant owes an action) is distinguishable at a glance
     from «قيد الدراسة» (the association owes one). Never on the public site. */
  --warn:             #7A4B10;   /* 7.39:1 on white · 6.46:1 on its wash */
  --warn-wash:        #FBEEDC;
  --warn-line:        #E4C48E;

  --field-bg:         #FFFFFF;
  --field-fg:         var(--ink);
  --field-line:       #C2CCC4;
  --field-placeholder:#909A92;
  --focus-ring:       var(--brand);
  /* The primary at 28%. The one place a brand colour is restated as an rgba()
     literal — there is no colour-mix() on Chrome 81 (D12) — so it MOVES WITH
     --green. #1B7937 = rgb(27, 121, 55). */
  --focus-ring-soft:  rgba(27, 121, 55, .28);
  --focus-ring-deep:  #FFFFFF;
  /* The ring on a deep ground. --focus-ring-soft is the primary at 28% and disappears on
     --green-900; this is the same idea inverted. White at 55% over --green-800 composites to
     well past the 3:1 non-text floor. */
  --focus-ring-on-deep: rgba(255, 255, 255, .55);

  --scrim:            rgba(12, 28, 19, .5);
  --lightbox-bg:      rgba(12, 28, 19, .93);
  --lightbox-chrome:  rgba(255, 255, 255, .10);
  --lightbox-chrome-hover: rgba(255, 255, 255, .22);
  --lightbox-chrome-line:  rgba(255, 255, 255, .40);
  --deep-fill:        rgba(255, 255, 255, .07);
  --deep-fill-strong: rgba(255, 255, 255, .12);

  --skeleton-a:       #EDF1EC;
  --skeleton-b:       #F7F9F6;

  /* File-type chip on the documents list. ONE neutral pair — a document list is not
     a warning list, so no red chip. */
  --chip-neutral-bg:   var(--stone-50);
  --chip-neutral-fg:   #46514A;          /* 7.80:1 on --stone-50 ✓ text */
  --chip-neutral-line: var(--line-strong);

  /* Kept for the ADMIN, where scanning a table by file type is a real task. */
  --doc-pdf-bg: #F7E3E1;  --doc-pdf-fg: #8E1E17;
  --doc-doc-bg: #E1E9F5;  --doc-doc-fg: #1B4576;

  /* ── ServiceRequest lifecycle. Six states, six flat pairs. ADMIN ONLY — none of
     these appears on the public site except the read-only status on /requests/track.
     Every *-fg is >= 4.5:1 on its own *-bg. Recompute if a fork changes them. */
  --st-submitted-bg:  #EDF1EC;  --st-submitted-fg: #3C463F;              --st-submitted-line: #D6DED5;
  --st-review-bg:     var(--bronze-wash); --st-review-fg: var(--bronze-ink); --st-review-line: var(--bronze);
  --st-needsinfo-bg:  var(--warn-wash);   --st-needsinfo-fg: var(--warn);  --st-needsinfo-line: var(--warn-line);
  --st-approved-bg:   var(--ok-wash);     --st-approved-fg: var(--ok);     --st-approved-line: var(--ok-line);
  --st-rejected-bg:   var(--danger-wash); --st-rejected-fg: var(--danger); --st-rejected-line: var(--danger-line);
  --st-closed-bg:     transparent;        --st-closed-fg: var(--ink-muted);--st-closed-line: var(--line-strong);

  /* The <select> chevron is a data URI, so its stroke colour cannot be a var().
     Moved with --ink-muted (#59645C) — the one place in the system where a colour is
     duplicated, and it is here rather than in site.css for exactly that reason. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2359645C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ── Type ───────────────────────────────────────────────────────────────── */
  /* TAJAWAL, not upstream's Cairo — the second lever (after the palette) that makes
     this fork a different DESIGN rather than a recolour. More geometric and narrower
     than Cairo's rounded humanist shapes, which is what gives this site its more
     institutional voice. Self-hosted under wwwroot/fonts/ and linked by brand.json's
     "fontCssUrl"; SIL OFL 1.1, so the files ship in the repo rather than being fetched
     from Google at page load (no third-party request on the critical path, no visitor
     IP handed to a third party — the same D8 reasoning as upstream).
     Cairo stays in the fallback stack: its files are still in wwwroot/fonts, so a
     browser that fails on Tajawal lands on another real Arabic face, not Tahoma. */
  --font: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
  --font-display: var(--font);

  /* Tajawal runs a little smaller on the body than Cairo at the same px, so the base
     and the two steps above it are nudged up rather than inherited verbatim. */
  --fs-xs:   0.8125rem;
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-md:   clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.48vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.3rem + 0.95vw, 2rem);
  --fs-2xl:  clamp(1.8125rem, 1.45rem + 1.75vw, 2.75rem);
  --fs-3xl:  clamp(2.0625rem, 1.55rem + 2.7vw, 3.375rem);
  --fs-stat: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);

  --fs-tagline: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  --fs-unit: 0.5em;

  /* Arabic needs materially more leading than Latin, and Tajawal's shorter descenders
     let the body copy breathe a touch further than Cairo's 1.9 without drifting apart. */
  --lh-body: 1.95;
  --lh-tight: 1.4;
  --lh-hero: 1.22;
  --lh-display: 1.16;

  --h-weight: 700;
  --h-weight-strong: 800;
  /* Tajawal is narrower than Cairo and its joins are already tight, so headings take a
     hair of POSITIVE tracking where upstream takes -0.005em. Verified on the hero H1
     at 54px: negative tracking pinched the ـلـ/ـعـ joins in «بتلعة نزا». */
  --h-tracking: 0.004em;
  --h-color: var(--brand-strong);

  --measure: 74ch;
  --measure-narrow: 68ch;
  --measure-lead: 58ch;

  /* ── Space and rhythm ───────────────────────────────────────────────────── */
  --s0: 2px;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --s10: 128px;

  --container: 1160px;      /* 40px tighter than upstream — a denser, document-like column */
  --container-narrow: 800px;
  --container-wide: 1320px; /* the ADMIN content column only */
  --gutter: clamp(16px, 4vw, 32px);

  /* Section rhythm — the biggest lever on how "spacious" a fork feels. Tighter than
     upstream's clamp(40px, 7vw, 88px): this association's content is largely
     documents, policies and lists, and a compact band rhythm reads as an institution
     rather than as a campaign page. */
  --band-y: clamp(36px, 6vw, 76px);
  --band-y-tight: clamp(24px, 4vw, 48px);
  /* Raised from clamp(52px, 7.5vw, 96px) when the masthead absorbed the header and the seal
     (Docs/10-ui-design-spec.md §7). The band now carries three stacked elements that the old
     hero handed to a separate topbar and header bar, and at the old value they touched. */
  --band-y-hero: clamp(64px, 9vw, 128px);
  --grid-gap: var(--s5);

  /* ── The Open Register devices (design spec §9) ──────────────────────────── */
  /* The 6px full-bleed lime seam. It appears exactly twice per page — the bottom edge of the
     masthead and the top edge of the footer — so the two of them bracket the document. Inner
     pages echo it at 3px under the page header. */
  --seam-h: 6px;
  --seam-h-inner: 3px;
  /* Device C, the diamond lattice: the cell size of the 45°/-45° repeating gradient. Matched to
     the 44px glyph tile so the ground and the components share one module. */
  --lattice-cell: 44px;
  --lattice-cell-sm: 32px;

  /* ── Shape ──────────────────────────────────────────────────────────────── */
  /* SHARPER than upstream, deliberately — the third design lever. Upstream runs
     4/8/12/16 with a 16px cap; this fork halves the scale so cards, fields and
     buttons read as crisp rectangles. Nothing in site.css assumes a value. */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;
  --r-btn: 3px;             /* very nearly square — the most visible single difference */
  --r-card: var(--r-md);
  --r-field: var(--r-sm);
  --r-chip: var(--r-pill);
  --r-media: var(--r-sm);
  --r-avatar: var(--r-md);

  --bd: 1px;
  --bd-strong: 3px;

  /* Card treatment. Flat — no shadow — but drawn with the STRONGER hairline rather
     than the soft one, which is what makes the sharper corners read as intentional
     instead of as a rounding bug. */
  --card-bg: var(--paper);
  --card-border-color: var(--line-strong);
  --card-shadow: none;
  --card-hover-border: var(--brand);
  --card-hover-lift: -1px;
  --card-pad: var(--s5);

  /* Buttons. Squarer, heavier and slightly taller than upstream's. */
  --btn-radius: var(--r-btn);
  --btn-weight: 800;
  --btn-min-h: 46px;        /* never below 44px — tap-target floor */
  --btn-pad-x: var(--s6);
  --btn-pad-y: 11px;
  --btn-fs: var(--fs-sm);
  --btn-transform: none;
  --btn-tracking: 0.01em;

  /* The eyebrow / stat rule — this brand's signature mark, and the ONE place the
     emblem's lime appears. Upstream's is a short thick gold stub (26×3); this is a
     long lime hairline (44×2): the same idea, drawn in the association's own
     brightest colour. */
  --rule-w: 44px;
  --rule-h: 2px;
  --rule-color: var(--lime);

  /* The ONE shadow tier, reserved for genuinely floating surfaces: modal, dropdown,
     mobile drawer, lightbox image, toast — plus the sticky header once it actually
     overlaps content. Tinted with the brand's deep green rather than a cool grey, or
     it greys the stone it falls on. */
  --shadow-pop: 0 10px 26px -14px rgba(12, 40, 26, .26);

  /* ── Hero ───────────────────────────────────────────────────────────────── */
  --hero-bg: var(--surface-deep);
  /* hero.jpg is a GENERATED geometric texture, not a photograph: the association's
     legacy album turned out to be المرامية's photo set (Docs/07 OQ-5), so there is no
     owned hero image and borrowing theirs was not an option. A flat pattern at low
     opacity is honest and costs nothing. Raise this only if the association supplies
     its own photography. */
  /* Tuned WITH the overlay alphas below, not independently. At the inherited .20/.96
     pairing the lattice in hero.jpg was mathematically present and visually invisible —
     the hero rendered as a flat slab. Raised here and the overlay opened below so the
     texture actually reads. Both figures were checked against the hero text: the
     overlay and the image share the same #125E33 ground, so the composite luminance
     barely moves and white on it stays ~7.8:1. */
  --hero-image-opacity: .45;
  /* The overlay's colour is --green-800 restated as an rgba() literal — no
     colour-mix() on Chrome 81 (D12) — so it MUST move with --surface-deep or the hero
     and its band disagree. #197033 = rgb(25, 112, 51). */
  --hero-overlay: linear-gradient(to left, rgba(25, 112, 51, .90) 0%, rgba(25, 112, 51, .74) 100%);
  --hero-y: clamp(44px, 8vw, 104px);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --dur: 160ms;             /* D11: ≤200ms, hover/focus only */
  --dur-slow: 220ms;
  --dur-enter: 400ms;       /* entrance only, behind prefers-reduced-motion */
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ── Z-index ────────────────────────────────────────────────────────────── */
  --z-base:     0;
  --z-sticky:   100;
  --z-dropdown: 110;
  --z-scrim:    140;
  --z-drawer:   150;
  --z-modal:    160;
  --z-lightbox: 300;
  --z-toast:    400;
  --z-skip:     500;

  /* ── Platform ───────────────────────────────────────────────────────────── */
  /* D12 — declare the scheme or Android's force-dark filter invents one and hides
     form fields. Repeated in the <meta> tag; both are needed. */
  color-scheme: light;
  accent-color: var(--brand);
}