/* Brixton Infrastructure — design tokens
   Palette per brand brief (Ledger palette). Usage rules are enforced by convention:
   green = CTAs and active states only; gold = one dose per page (logo exempt);
   harbor blue = logo and data visualisation only. */

:root {
  /* Light-only design: opt out of browser auto-dark inversion. Paired with the
     <meta name="color-scheme"> in shared/layout.mjs. This changes no colour
     value; it tells the UA not to repaint ours. */
  color-scheme: light;

  /* ---- Brand palette ---- */
  --bx-ink-navy: #0E2A3A;        /* text, dark sections, photo duotones */
  --bx-bond-paper: #F7F5F1;      /* page background */
  --bx-signature-green: #1E6E5C; /* CTAs and active states ONLY */
  --bx-graphite: #6B6963;        /* secondary text, captions (hairlines use --bx-rule).
                                    Darkened from the delivered #8C8A84 on the principal's
                                    decision (Aug 2026). #8C8A84 measured 3.17:1 on Bond
                                    Paper — below WCAG AA's 4.5:1 and the sole cause of the
                                    homepage's 0.92 accessibility score. #6B6963 measures
                                    5.04:1 / 4.79:1 at the same hue (45deg) and chroma, and
                                    still sits well above --bx-body-text (L 40.4% vs 19.4%),
                                    so eyebrows, plate captions and mono indices keep
                                    reading as the lighter tier they are meant to be. */
  --bx-seal-gold: #C9A15A;       /* one dose per page */
  --bx-harbor-blue: #3D6E8C;     /* logo + data viz only */
  --bx-harbor-blue-lift: #5E93B5;/* dark-background variant of harbor blue */

  /* ---- Derived surfaces and states ---- */
  --bx-paper-shade: #F2EFEA;             /* alternate light band (services) */
  --bx-rule: #DAD6CE;                    /* hairline on paper */
  --bx-rule-strong: var(--bx-ink-navy);  /* leading hairline of a table/grid */
  --bx-rule-dark: rgba(247, 245, 241, 0.16); /* hairline on navy */
  --bx-body-text: #2A3439;               /* body copy on paper. Darkened 30% from the
                                            delivered #3C4A52 (Aug 2026, principal) for
                                            readability: 8.41:1 -> 11.70:1 on Bond Paper,
                                            7.98:1 -> 11.11:1 on the paper shade. Stays
                                            clear of Ink Navy #0E2A3A (L 19.4% vs 14.1%)
                                            so headings still outrank body copy. */
  --bx-green-hover: #17594A;             /* CTA hover on paper */
  --bx-green-hover-dark: #24866F;        /* CTA hover on navy */
  --bx-on-navy-strong: rgba(247, 245, 241, 0.86);
  --bx-on-navy-muted: rgba(247, 245, 241, 0.66);
  --bx-on-navy-faint: rgba(247, 245, 241, 0.50);
  --bx-hover-wash: rgba(14, 42, 58, 0.035);

  /* ---- Typography ---- */
  --bx-font-display: 'Zilla Slab', Georgia, serif;
  --bx-font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --bx-font-caption: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --bx-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --bx-fs-hero: clamp(46px, 6.1vw, 90px);
  --bx-fs-display: clamp(34px, 4.3vw, 60px);
  --bx-fs-h2: clamp(28px, 3vw, 40px);
  --bx-fs-h3: 23px;
  --bx-fs-service: 27px;
  --bx-fs-teaser: clamp(24px, 2.3vw, 31px);
  --bx-fs-stat: clamp(30px, 3.2vw, 48px);
  --bx-fs-lead: 19px;
  --bx-fs-body: 18.5px;
  --bx-fs-body-sm: 17.5px;
  --bx-fs-card: 16.5px;
  --bx-fs-ui: 16px;
  --bx-fs-eyebrow: 14px;
  --bx-fs-caption: 13px;
  --bx-fs-mono: 12px;

  --bx-lh-hero: 1.02;
  --bx-lh-display: 1.06;
  --bx-lh-heading: 1.15;
  --bx-lh-body: 1.6;
  --bx-lh-card: 1.58;

  --bx-ls-hero: -0.02em;
  --bx-ls-heading: -0.01em;
  --bx-ls-eyebrow: 0.24em;
  --bx-ls-label: 0.2em;
  --bx-ls-plate: 0.16em;
  --bx-ls-nav: 0.1em;

  /* ---- Layout ---- */
  --bx-maxw: 1320px;
  --bx-gutter: 40px;
  --bx-gutter-sm: 24px;
  --bx-header-h: 130px;
  --bx-section-y: 96px;
  --bx-section-y-lg: 104px;
  --bx-gap: 48px;

  /* ---- Motion ---- */
  --bx-cycle: 30s;          /* hero chart two-phase loop */
  --bx-ease: ease-in-out;
  --bx-menu-in: 220ms ease-out;

  /* No border-radius and no shadows anywhere in this system:
     structure comes from hairline rules and whitespace. */
  --bx-radius: 0;
  --bx-shadow: none;
}