/*
 * SPDX-License-Identifier: FSL-1.1-ALv2
 * SPDX-FileCopyrightText: 2026 Woodfine Capital Projects Inc.
 */

/* app-mediakit-marketing-2 — design tokens.
 * Namespace: --m-*  (marketing register; sibling of the wiki's --k-* knowledge
 * register — see DESIGN-SYSTEM.md for the full judged rationale.)
 * Two-tenant: [data-brand="woodfine"] | [data-brand="pointsav"]
 * Chrome model: dark navy masthead + near-black footer (locked Sovereign
 * Editorial direction); everything else shares values with the live wiki
 * standard (app-mediakit-knowledge-2) for family consistency.
 *
 * Values cross-referenced against:
 *  - Live production keep-list (Playwright recon, 2026-07-01): canvas
 *    #F7F9FA, section #E6E7E8, ink #111827, navy #164679, PointSav slate
 *    #B4C5D5, navy top-rule card motif.
 *  - Live wiki standard (app-mediakit-knowledge-2/static/tokens.css): 57px
 *    masthead, 640/960 grid breakpoints, 720px prose measure, 1rem card
 *    pad/gap, 75/150/300ms motion @ cubic-bezier(0.2,0,0.38,0.9), badge
 *    border #c8ccd1 radius 3px, Inter 16/1.6 body, Source Serif 4 h1.
 */

:root {
  /* ---------------------------------------------------------- primitives: color */
  --m-navy-900: #0b2340;
  --m-navy-800: #10365c;
  --m-navy-700: #164679;   /* brand navy — masthead bg, accent, card rule (keep-list) */
  --m-navy-600: #1d5795;   /* hover/active on light surfaces */
  --m-navy-100: #e8eef5;   /* selected/active row tint */
  --m-slate-300: #b4c5d5;  /* PointSav hero slate (keep-list); on-navy muted ink */

  --m-ink-950: #0e1117;    /* footer bg (locked) */
  --m-ink-900: #111827;    /* body text (keep-list) */
  --m-ink-700: #374151;
  --m-ink-600: #4b5563;
  --m-ink-550: #54595d;    /* wiki secondary ink — workhorse secondary here too */
  --m-ink-525: #646a70;    /* wiki badge/muted ink */
  --m-ink-500: #6b7280;    /* keep-list secondary — light surfaces ONLY (4.5:1 floor) */
  --m-ink-400: #9ca3af;    /* muted ink on footer black (7.5:1 on #0e1117) */

  --m-grey-350: #c8ccd1;   /* wiki border-strong — badge + input borders */
  --m-grey-300: #d7dadd;
  --m-grey-200: #e6e7e8;   /* keep-list section grey */
  --m-grey-100: #f0f2f4;
  --m-grey-50:  #f7f9fa;   /* keep-list page bg */
  --m-white:    #ffffff;

  /* ---------------------------------------------------------- semantic: surface */
  --m-surface-page:    var(--m-grey-50);
  --m-surface-raised:  var(--m-white);
  --m-surface-section: var(--m-grey-200);
  --m-surface-chrome:  var(--m-navy-700);  /* masthead: navy is now a background (locked) */
  /* Footer: light grey, matching the wiki's exact footer surface (#f8f9fa)
     — operator call (2026-07-01): dropped the near-black footer that was
     part of the original locked direction, in favor of full family
     consistency with the wiki. Navy masthead remains the one differentiator
     between marketing's dark-topped chrome and the wiki's all-light chrome. */
  --m-surface-footer:  #f8f9fa;
  --m-surface-scrim:   rgba(14, 17, 23, 0.5);

  /* ---------------------------------------------------------- semantic: ink
   * WCAG bug-fix layer: every ink token documents its permitted surfaces.
   * Production's #6B7280 fails AA on section-grey backgrounds — demoted
   * to light-surface-only use; --m-ink-secondary is the workhorse.
   */
  --m-ink:                  var(--m-ink-900);
  --m-ink-secondary:        var(--m-ink-550);  /* safe on page/raised/section (>=5.9:1) */
  --m-ink-muted:            var(--m-ink-500);  /* page/raised ONLY */
  --m-ink-on-chrome:        var(--m-white);        /* 9.6:1 on navy-700 */
  --m-ink-on-chrome-muted:  var(--m-slate-300);    /* 5.4:1 on navy-700 */
  /* Footer ink — dark text on the light #f8f9fa surface, matching the
     wiki's own footer ink colors (#54595d workhorse, #646a70 muted). */
  --m-ink-on-footer:        var(--m-ink-550);   /* 8.1:1 on #f8f9fa */
  --m-ink-on-footer-muted:  var(--m-ink-525);   /* 6.4:1 on #f8f9fa */

  /* ---------------------------------------------------------- semantic: interactive */
  --m-link:            var(--m-navy-700);
  --m-link-hover:      var(--m-navy-600);
  --m-link-on-dark:        var(--m-slate-300);
  --m-link-on-dark-hover:  var(--m-white);
  --m-cta-bg:          var(--m-navy-700);
  --m-cta-bg-hover:    var(--m-navy-800);
  --m-cta-ink:         var(--m-white);

  --m-focus-ring-w:      2px;
  --m-focus-ring-offset: 2px;
  --m-focus-ring:         var(--m-navy-600);
  --m-focus-ring-on-dark: var(--m-white);

  /* ---------------------------------------------------------- semantic: border */
  --m-border:        var(--m-grey-200);
  --m-border-strong: var(--m-grey-350);
  --m-rule-accent:   var(--m-navy-700);  /* the signature card top-rule */

  /* ---------------------------------------------------------- typography */
  --m-font-serif: "Source Serif 4", "Serif Fallback", Georgia, serif;
  --m-font-sans:  "Inter", "Sans Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --m-font-mono:  "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --m-text-xs:   0.75rem;    /* 12 — legal, captions */
  --m-text-sm:   0.875rem;   /* 14 — nav, meta, footer links */
  --m-text-base: 1rem;       /* 16 — body (wiki-exact) */
  --m-text-md:   1.125rem;   /* 18 — lede on subpages */
  --m-text-lg:   1.3125rem;  /* 21 — h3 / card titles */
  --m-text-xl:   1.625rem;   /* 26 — h2 */
  --m-text-2xl:  2.125rem;   /* 34 — h1 (wiki-exact size) */
  --m-text-display: clamp(2.375rem, 1.6rem + 3.2vw, 3.5rem); /* hero only */

  --m-weight-regular:  400;
  --m-weight-medium:   500;
  --m-weight-semibold: 600;
  --m-weight-bold:     700;

  --m-lh-body:    1.6;   /* wiki-exact */
  --m-lh-lede:    1.45;
  --m-lh-heading: 1.2;
  --m-lh-display: 1.12;

  /* Oswald's uppercase register survives as a treatment, not a font */
  --m-label-size:      0.6875rem;
  --m-label-tracking:  0.08em;
  --m-label-transform: uppercase;
  --m-label-weight:    var(--m-weight-semibold);

  /* h1 discipline — exactly one per page (fixes the missing-h1 audit finding) */
  --m-h1-font:      var(--m-font-serif);
  --m-h1-weight:    var(--m-weight-bold);
  --m-h1-rule:      1px solid var(--m-border-strong);
  --m-h1-rule-gap:  0.375rem;

  /* ---------------------------------------------------------- spacing (4px grid) */
  --m-space-1: 0.25rem;
  --m-space-2: 0.5rem;
  --m-space-3: 0.75rem;
  --m-space-4: 1rem;
  --m-space-6: 1.5rem;
  --m-space-8: 2rem;
  --m-space-12: 3rem;
  --m-space-16: 4rem;
  --m-space-band: clamp(3rem, 2rem + 4vw, 6rem);

  /* ---------------------------------------------------------- radii
   * Content surfaces stay square (keep-list flatness / the prospectus
   * register); shared family micro-UI (badge, inputs) adopts the wiki's
   * 2/3px so identical artifacts render identically family-wide.
   */
  --m-radius-0:       0;
  --m-radius-control: 2px;
  --m-radius-badge:   3px;

  /* ---------------------------------------------------------- elevation */
  --m-shadow-none:   none;
  --m-shadow-drawer: 0 0 24px rgba(14, 17, 23, 0.25);

  /* ---------------------------------------------------------- motion (wiki-exact) */
  --m-dur-fast: 75ms;
  --m-dur-base: 150ms;
  --m-dur-slow: 300ms;
  --m-ease-standard:   cubic-bezier(0.2, 0, 0.38, 0.9);
  --m-ease-decelerate: cubic-bezier(0, 0, 0.38, 0.9);
  --m-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* ---------------------------------------------------------- layout
   * --m-overflow-guard: applied to body in app.css — the structural fix
   * for the audited sub-page horizontal-scroll bug. No fixed-pixel widths
   * survive the rewrite; every measure is a clamp()/ch value below.
   */
  --m-masthead-h:    57px;    /* wiki-exact sticky height */
  --m-container-max: 1140px;
  --m-prose-max:     720px;   /* wiki-exact article measure — legal/notice pages */
  --m-gutter:        clamp(1rem, 0.5rem + 2.5vw, 2rem);
  /* Grid breakpoints (media queries only — custom props can't drive them),
     wiki-exact: 2-col to 1-col at 640px; 4-col to 2-col at 960px. */

  /* Feature-card grid — the signature keep-list motif, tokenized */
  --m-card-bg:        var(--m-surface-raised);
  --m-card-border:    1px solid var(--m-border);
  --m-card-rule-size: 3px;
  --m-card-rule:      var(--m-card-rule-size) solid var(--m-rule-accent);
  --m-card-pad:       var(--m-space-6);
  --m-card-gap:       var(--m-space-4);   /* wiki-exact 1rem */
  --m-card-radius:    var(--m-radius-0);

  /* Cross-site handoff cards (e.g. "Digital Systems" / "Real Property
     Infrastructure") — always-on filled navy, not a tint (see .m-card--linked
     in app.css for the full rationale). Its own token, not a raw
     var(--m-navy-700) reference in app.css, so it can be tenant-overridden
     (FABLE polish audit 2026-07-02: PointSav's full-saturation #234ed8 read
     objectively louder than Woodfine's #164679 at equal fill size — measured
     6.66:1 vs 9.61:1 white-text contrast on the same card treatment — fixed
     by basing PointSav's fill on the next canonical step down, primary-70
     #173ab1/--m-navy-800, restoring near-parity at 9.22:1 while leaving
     small text/links/CTAs on primary-60 as before). */
  --m-card-linked-bg:     var(--m-navy-700);
  --m-card-linked-border: 1px solid var(--m-navy-100);

  /* Button-style card row (pure-navigation grids: Manifest / BIM Library /
     Location Intelligence, Source / Documentation / Software) — compact,
     centered, accent-filled pill, visually distinct from content cards. */
  --m-button-card-bg:         var(--m-navy-700);
  --m-button-card-ink:        var(--m-white);
  --m-button-card-bg-hover:   var(--m-navy-800);
  --m-button-card-radius:     var(--m-radius-control);
  --m-button-card-pad:        var(--m-space-3) var(--m-space-4);

  /* Icon strip — restores the "Development Classes" / capability graphics.
     This section is primary content on the original sites (the product
     taxonomy), not decorative filler.

     A two-tier (mobile-flat / desktop-clamp) version of this was tried and
     reverted 2026-07-02 — FABLE visual review found it produced a jarring
     58%-of-section-height collapse right at the tier boundary (288px
     flex-wrapped icons -> 200px single-row icons across a 20px viewport
     range) and STILL didn't fix the uneven wrap it was meant to solve
     (PointSav's 3 icons still orphan-wrapped 2+1 in the 768-959px band).
     Root cause was using flexbox for column layout at all — flex-wrap
     can't balance rows. Fixed properly in app.css by switching
     `.m-icon-strip__inner` to CSS grid (`repeat(auto-fit, minmax(...))`),
     which balances columns by construction — so a single monotonic
     `clamp()` here is sufficient again, no breakpoint-driven size jump. */
  --m-icon-strip-bg:      var(--m-surface-section);
  --m-icon-strip-pad-y:   var(--m-space-12);
  --m-icon-strip-gap:     var(--m-space-8);
  --m-icon-strip-text-gap: var(--m-space-4);

  /* Desktop/tablet size (>=700px; the max-width:699px block below
     overrides this value for mobile, so this is effectively a
     desktop-only value already, unqualified here to match the existing
     token pattern). Round 10 (2026-07-07, operator reversal): desktop
     caption moved from beside the icon back to below it, so the icon is
     once again the sole visual element in its own row — larger than the
     88-128px "shares a row with text" size (round 3-6), but well short of
     the pre-caption 140-280px (round 1-2), which had no competing text at
     all in the cell. 112-160px balances a confident icon against the
     visible title+descriptor now stacked underneath it. */
  --m-icon-strip-size:    clamp(112px, 10vw, 160px);

  /* Round 12 (2026-07-07, operator alignment complaint): the icon box is now
     a UNIFORM fixed WIDTH x HEIGHT for every icon at a given breakpoint, with
     the artwork centered inside via `object-fit: contain` (see
     `.m-icon-strip__img` in app.css). Round 10 retrimmed each of the 7 SVGs to
     its own tight bounding box, so native aspect ratios now span 0.81:1 to
     2.02:1. Round 11 sized by height with native-ratio width — which is exactly
     what misaligned the rows (different rendered widths -> ragged mobile column)
     and columns (different rendered heights -> uneven desktop row). A single
     shared box size makes every icon's footprint identical, so rows align
     (equal height) and mobile columns align (equal width) by construction.
     --m-icon-strip-size is the box HEIGHT; this token is the box WIDTH, a fixed
     1.3:1 (13/10) ratio of it. 1.3 is the min-max letterbox optimum for THIS
     set of 7 ratios: it balances the worst case at ~0.62 linear fill between
     the widest icon (2.02) and the tallest (0.81) — verified by computing fill
     = min(R_box,R_icon)/max(R_box,R_icon) across all 7 at candidate ratios
     1.28/1.3/1.4/1.5. Because this is calc() over --m-icon-strip-size, it
     auto-tracks the mobile override below (76px height -> ~99px width) with no
     separate mobile width token needed. */
  --m-icon-strip-width:   calc(var(--m-icon-strip-size) * 1.3);

  /* Mobile-only reduction, same monotonic-growth discipline as before
     (76px -> 88px floor as viewport crosses 700px — growing, not
     shrinking, avoiding the backwards-jump mistake a reverted two-tier
     attempt made in 2026-07-02). Column-count logic (1-col/N-col) is
     untouched. */
  --m-icon-strip-size-mobile: 76px;
  --m-icon-strip-gap-mobile:  var(--m-space-6);
  --m-icon-strip-pad-y-mobile: var(--m-space-8);

  /* ---------------------------------------------------------- data tables
     Wiki-parity styling for markdown-rendered tables in legal/notice prose
     (the disclaimer's jurisdiction / exemption-framework table) and in the
     footer disclosure accordion (same markdown renderer). */
  --m-table-border:   var(--m-grey-350);
  --m-table-head-bg:  #f8f9fa;
  --m-table-stripe:   color-mix(in srgb, #f8f9fa 55%, var(--m-white));
  --m-table-cell-pad: 0.45rem 0.7rem;
  --m-table-fs:       0.9375rem;

  /* ---------------------------------------------------------- masthead + nav */
  --m-masthead-bg:        var(--m-surface-chrome);
  --m-masthead-ink:       var(--m-ink-on-chrome);
  --m-masthead-ink-muted: var(--m-ink-on-chrome-muted);
  --m-masthead-border-b:  1px solid rgba(255, 255, 255, 0.14);
  --m-nav-size:           var(--m-text-sm);
  --m-nav-tracking:       0.02em;
  --m-nav-current-rule:   2px solid var(--m-white);

  /* Mobile drawer — mirrors the wiki's proven pattern (left slide-in,
     pre-rendered, scrim, 3 labeled sections mirroring the footer columns).
     Departures: navy header band ties it to marketing's dark masthead;
     no search field (marketing has no search corpus to justify one). */
  --m-drawer-w:            300px;
  --m-drawer-bg:           var(--m-surface-raised);
  --m-drawer-header-bg:    var(--m-surface-chrome);
  --m-drawer-header-ink:   var(--m-ink-on-chrome);
  --m-drawer-section-gap:  var(--m-space-6);
  --m-drawer-dur:          var(--m-dur-slow);
  --m-drawer-ease:         var(--m-ease-decelerate);

  /* ---------------------------------------------------------- hero band
   * (brand-swapped below). Real asset photography carries the visual
   * weight, not the chrome — --m-hero-scrim keeps text legible over an
   * image without hiding the photograph.
   */
  --m-hero-band-bg:        var(--m-navy-700);
  --m-hero-band-ink:       var(--m-white);
  --m-hero-band-ink-muted: var(--m-slate-300);
  --m-hero-band-rule:      rgba(255, 255, 255, 0.28);
  --m-hero-lede-font:      var(--m-font-serif);
  --m-hero-lede-size:      var(--m-text-md);
  --m-hero-lede-lh:        var(--m-lh-lede);
  --m-hero-img-ratio:      16 / 7;
  --m-hero-scrim: linear-gradient(180deg,
                    rgb(11 35 64 / 0.05) 35%,
                    rgb(11 35 64 / 0.68) 100%);

  /* ---------------------------------------------------------- footer
   * Three-tier structure: (1) nav/contact columns; (2) a rule-separated
   * on-page disclosure band — mono-caps label + legal-size body per
   * jurisdiction slot, populated per brand (SEC "clear and prominent"
   * guidance: disclosures live here, not behind a link); (3) badge row +
   * trademark/copyright base line.
   */
  --m-footer-bg:          var(--m-surface-footer);
  --m-footer-ink:         var(--m-ink-on-footer);
  --m-footer-ink-muted:   var(--m-ink-on-footer-muted);
  --m-footer-link:        var(--m-navy-700);   /* links stay the brand accent, not grey */
  --m-footer-link-hover:  var(--m-navy-800);
  --m-footer-rule:        1px solid var(--m-border-strong);
  --m-footer-col-gap:     var(--m-space-8);
  --m-footer-pad-y:       var(--m-space-12);
  --m-footer-heading-size: var(--m-label-size);

  /* Disclosure accordion (<details>/<summary>) — collapsed by default */
  --m-disclosure-summary-ink:    var(--m-navy-700);
  --m-disclosure-summary-size:   var(--m-text-sm);
  --m-disclosure-summary-weight: var(--m-weight-semibold);
  --m-disclosure-border:         1px solid var(--m-border-strong);
  --m-disclosure-pad:            var(--m-space-4);

  /* Tier 2 — jurisdiction disclosure slots (inside the accordion) */
  --m-slot-label-family:    var(--m-font-mono);
  --m-slot-label-size:      0.6875rem;
  --m-slot-label-tracking:  0.1em;
  --m-slot-label-transform: uppercase;
  --m-slot-label-ink:       var(--m-ink-on-footer);
  --m-slot-body-size:       0.8125rem;   /* readable, not fine-print-buried */
  --m-slot-body-lh:         1.55;
  --m-slot-body-ink:        var(--m-ink-on-footer-muted);
  --m-slot-max-measure:     var(--m-prose-max);
  --m-slot-gap:             var(--m-space-6);
  --m-slot-rule-top:        1px solid var(--m-border);

  --m-footer-legal-size:      var(--m-text-xs);

  /* ---------------------------------------------------------- badge row
   * "Powered by MediaKit" — a certification mark, not a themed component.
   * Byte-identical to the wiki's real badge (white pill on any footer
   * color) so the mark is recognizable across the whole site family.
   */
  --m-badge-row-gap:    var(--m-space-3);
  --m-badge-bg:         var(--m-white);
  --m-badge-border:     1px solid var(--m-grey-350);
  --m-badge-radius:     var(--m-radius-badge);
  --m-badge-pad:        0.3125rem 0.625rem;
  --m-badge-glyph-size: 15px;
  --m-badge-gap:        0.375rem;
  --m-badge-label-size:     0.5625rem;
  --m-badge-label-tracking: 0.06em;
  --m-badge-label-ink:      var(--m-ink-525);
  --m-badge-name-size:      0.75rem;
  --m-badge-name-weight:    var(--m-weight-bold);
  --m-badge-name-ink:       var(--m-ink-550);

  /* ---------------------------------------------------------- a11y chrome */
  --m-skiplink-bg:  var(--m-navy-800);
  --m-skiplink-ink: var(--m-white);

  /* ---------------------------------------------------------- z-index */
  --m-z-masthead: 100;
  --m-z-scrim:    180;
  --m-z-drawer:   200;
  --m-z-skiplink: 300;

  /* ---------------------------------------------------------- selection */
  --m-selection-bg:  var(--m-navy-100);
  --m-selection-ink: var(--m-ink-900);
}

/* ================================================================ tenants
 * Per-brand accent scale + hero-band identity. Corrected 2026-07-02 (FABLE
 * color-compliance audit): PointSav was silently wearing Woodfine's navy
 * #164679 for its ENTIRE chrome (masthead, links, CTAs, card rules) because
 * `data-brand="pointsav"` never actually overrode any of the --m-navy-*
 * primitives every semantic token derives from — this block only swapped
 * the hero band. PointSav's own canonical brand color is #234ed8
 * ("color.primary-60" in pointsav-design-system's DTCG token file,
 * captioned verbatim "the canonical PointSav-brand interactive color").
 * The full step scale below is NOT invented — it's lifted directly from
 * that same canonical primitives table (primary-10/50/60/70/80), mapped by
 * relative step distance from the Woodfine scale's own -100/-600/-700/-800/
 * -900 structure, so hover/tint states stay internally consistent rather
 * than half-swapped. Verified: white-on-#234ed8 = 6.66:1 (AA). A deeper
 * "full dark-terminal" PointSav theme was considered and rejected — its own
 * accent token is steel-blue, not blue, and #234ed8-on-black measures
 * 2.99:1 (fails 3:1) — see FABLE audit notes.
 */
[data-brand="woodfine"] {
  --m-hero-band-bg:        var(--m-navy-700);
  --m-hero-band-ink:       var(--m-white);
  --m-hero-band-ink-muted: var(--m-slate-300);
  --m-hero-band-rule:      rgba(255, 255, 255, 0.28);
  --m-focus-ring-hero:     var(--m-white);
}

[data-brand="pointsav"] {
  /* Canonical PointSav accent scale — pointsav-design-system DTCG
     primitives, not Woodfine's navy. Re-themes every downstream --m-link/
     --m-cta-bg/--m-surface-chrome/--m-rule-accent/etc. token automatically,
     since they all derive from these primitives rather than hardcoded hex. */
  --m-navy-900: #0c2785;  /* color.primary-80 */
  --m-navy-800: #173ab1;  /* color.primary-70 */
  --m-navy-700: #234ed8;  /* color.primary-60 — canonical PointSav brand color */
  --m-navy-600: #3f6cf2;  /* color.primary-50 */
  --m-navy-100: #eef3ff;  /* color.primary-10 */

  /* Large solid-fill surfaces (the cross-site handoff card) use one step
     darker than the base accent — FABLE polish audit 2026-07-02: full
     primary-60 as a big block measured louder than Woodfine's navy at the
     same treatment (6.66:1 vs 9.61:1); primary-70 restores near-parity
     (9.22:1, WCAG AAA) while links/CTAs/text stay on primary-60. */
  --m-card-linked-bg: var(--m-navy-800);

  --m-hero-band-bg:        var(--m-slate-300);
  --m-hero-band-ink:       var(--m-ink-900);
  --m-hero-band-ink-muted: var(--m-ink-700);  /* 5.3:1 on slate — fixes a live contrast failure */
  --m-hero-band-rule:      rgba(17, 24, 39, 0.25);
  --m-hero-scrim: linear-gradient(180deg,
                    rgb(180 197 213 / 0.0) 45%,
                    rgb(180 197 213 / 0.55) 100%);
  --m-focus-ring-hero:     var(--m-navy-800);
}

/* ================================================================ motion safety */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-dur-fast: 0ms;
    --m-dur-base: 0ms;
    --m-dur-slow: 0ms;
  }
}

/* ================================================================ icon-strip mobile
 * Below the grid's own 700px column-count breakpoint — see the
 * --m-icon-strip-size-mobile comment above for the measured rationale.
 */
@media (max-width: 699px) {
  :root {
    --m-icon-strip-size:  var(--m-icon-strip-size-mobile);
    --m-icon-strip-gap:   var(--m-icon-strip-gap-mobile);
    --m-icon-strip-pad-y: var(--m-icon-strip-pad-y-mobile);
  }
}