/* ==========================================================================
   Business aid — design tokens
   Single source of truth. Everything else references these.
   ========================================================================== */

:root {
  /* ---------- Brand colour ---------- */
  --ba-navy:        #0F1B2D;  /* primary ink, dark sections, logo mark */
  --ba-navy-2:      #16263E;  /* raised panels on navy */
  --ba-navy-deep:   #0B1421;  /* hero / full-bleed dark sections */
  --ba-navy-black:  #080F19;  /* footer */
  --ba-amber:       #F6A21E;  /* accent, CTA, status dot — ONE per view */
  --ba-amber-hover: #FFB63F;
  /* Amber is 2.08:1 on white, so it can fill a shape or draw a rule but
     must never carry small text on a light ground. This is the same hue
     dropped to 5.09:1 on paper / 4.71:1 on mist. */
  --ba-amber-ink:   #9A6206;

  /* ---------- Neutrals ---------- */
  --ba-slate:       #5B6B7F;  /* body copy on light */
  --ba-slate-dark:  #3C4A5E;  /* denser body copy, list items */
  --ba-muted:       #9AA4B0;  /* captions, meta — decorative only, 2.53:1 */
  --ba-muted-ink:   #616D7A;  /* the same role as text: 5.28:1 on paper */
  --ba-mist:        #F5F6F8;  /* alternate light section */
  --ba-paper:       #FFFFFF;
  --ba-border:      #E7EAEE;  /* hairlines on light */
  --ba-border-2:    #E7EAEE;  /* alias of --ba-border: the two were 3 units apart and never read as different */

  /* ---------- On-dark text ---------- */
  --ba-on-dark:        #FFFFFF;
  --ba-on-dark-soft:   #9DAAB9;
  --ba-on-dark-softer: #5E6E82;
  --ba-on-dark-bright: #C3CDD8;
  --ba-on-dark-line:   rgba(255,255,255,.12);

  /* ---------- Status ---------- */
  --ba-ok:    #2EBE6E;
  --ba-ok-ink:#1B8A4C;
  --ba-warn:  #F6A21E;
  --ba-err:   #E5484D;

  /* ---------- Typography ---------- */
  --ba-font:      'Space Grotesk', system-ui, -apple-system, sans-serif;
  --ba-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Fluid type scale — min at 375px, max at 1440px */
  --ba-fs-display: clamp(36px, 5.6vw, 88px);  /* hero h1            700 / -5%  */
  --ba-fs-h1:      clamp(32px, 5.2vw, 72px);  /* page h1            700 / -4.5% */
  --ba-fs-h2:      clamp(26px, 4.2vw, 62px);  /* section h2         700 / -4%  */
  --ba-fs-h3:      clamp(20px, 2.4vw, 32px);  /* card / row title   600 / -3%  */
  --ba-fs-h4:      19px;                      /* small card title   600 / -2%  */
  --ba-fs-lead:    clamp(16px, 2vw, 18px);    /* hero + section sub 400 */
  --ba-fs-body:    16px;
  --ba-fs-sm:      15px;
  --ba-fs-xs:      14px;
  --ba-fs-kicker:  12px;                      /* mono, +16% tracking, uppercase */
  --ba-fs-meta:    11px;                      /* mono, +14% tracking */

  --ba-lh-tight:  .92;
  --ba-lh-head:   1.0;
  --ba-lh-body:   1.6;
  --ba-lh-dense:  1.55;

  --ba-ls-display: -0.05em;
  --ba-ls-h1:      -0.045em;
  --ba-ls-h2:      -0.04em;
  --ba-ls-h3:      -0.03em;
  --ba-ls-h4:      -0.02em;
  --ba-ls-kicker:  0.16em;
  --ba-ls-meta:    0.14em;

  /* ---------- Spacing (base 4) ---------- */
  --ba-1: 4px;   --ba-2: 8px;   --ba-3: 12px;  --ba-4: 16px;
  --ba-5: 20px;  --ba-6: 24px;  --ba-8: 32px;  --ba-10: 40px;
  --ba-12: 48px; --ba-16: 64px; --ba-20: 80px;

  --ba-gutter:    clamp(20px, 5vw, 44px);   /* page side padding */
  --ba-section:   clamp(70px, 10vw, 120px); /* vertical section rhythm */
  --ba-section-sm:clamp(56px, 8vw, 96px);
  --ba-container: 1280px;
  --ba-measure:   720px;                    /* article column */

  /* ---------- Radii ---------- */
  --ba-r-md:   12px;   /* buttons (square variant), icon tiles */
  --ba-r-2xl:  24px;   /* form panel, blank state */
  --ba-r-lg:   16px;   /* small cards */
  --ba-r-xl:   20px;   /* cards */
  --ba-r-pill: 100px;  /* buttons, chips, badges */

  /* ---------- Shadows ---------- */
  --ba-sh-card:   0 20px 44px rgba(15,27,45,.10);
  --ba-sh-card-2: 0 22px 50px rgba(15,27,45,.12);
  --ba-sh-nav:    0 4px 24px rgba(15,27,45,.07);
  --ba-sh-amber:  0 18px 44px rgba(246,162,30,.50);
  --ba-sh-amber-s:0 12px 28px rgba(246,162,30,.45);
  --ba-sh-panel:  0 40px 100px rgba(0,0,0,.45);
  --ba-ring-amber:0 0 0 3px rgba(246,162,30,.18);

  /* ---------- Motion ---------- */
  --ba-ease:      cubic-bezier(.2,.7,.2,1);
  --ba-t-fast:    .2s;
  --ba-t-hover:   .25s;
  --ba-t-theme:   .35s;
  --ba-t-sweep:   .5s;
  --ba-t-reveal:  .7s;

  /* ---------- Layout ---------- */
  /* Measured, not assumed: the bar renders 84px on phone and tablet and
     87px on desktop. At 72 every scroll-margin-top and sticky top on the
     site was 12-15px short, which is where the inconsistent anchor
     landings came from. 88 clears the tallest with a hair to spare. */
  --ba-nav-h: 88px;
  --ba-z-nav: 100;
  --ba-z-menu: 200;
  --ba-z-cursor: 9999;
}

/* Breakpoints (for reference — used in base.css)
   mobile   < 640px    1 column
   tablet   640–899px  2 columns, desktop nav still hidden
   nav swap < 900px    burger + full-screen overlay
   desktop  900–1279px 3 columns
   wide     ≥ 1280px   container capped at 1280px
*/