/* ==========================================================================
   BioraX design tokens
   --------------------------------------------------------------------------
   The single source for the 2026 theme. Every value is `--bx-` prefixed on
   purpose: biorax.css already owns an unprefixed :root set and biofit-home.css
   owns a colliding one scoped to #bx-home. Prefixing means this file can load
   alongside both without touching either, and pages can migrate onto it one at
   a time instead of in one risky sweep.

   PROVENANCE — every colour below is sampled from the approved homepage
   mockup (Homepage.png, 1521x6572), not invented:

     #074A77  the single brand blue — bands AND every filled button
     #032338  footer
     #E8E8E8  light sections
     #000000  the dark "your journey" band
     #71B0D9  light accent blue — eyebrows, "VIEW PROGRAM" labels, step numbers

   The page alternates dark → blue → light → black → light → blue → light →
   dark → blue. It is NOT a dark-only page.

   Type is a grotesque sans throughout. There is no display serif in this
   design. Geist is used because header.twig already loads it and it is the
   closest match in what is available; the exact face still needs confirming
   against the Figma file.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- surfaces -- */
  --bx-dark:         #0b0b0b;   /* hero */
  --bx-black:        #000000;   /* "your journey" band */
  --bx-cta:          #010101;   /* closing CTA */
  --bx-light:        #e8e8e8;   /* programs, science, FAQ */
  --bx-blue:         #074a77;   /* bands and buttons — one blue, not two */
  --bx-blue-deep:    #032338;   /* footer */
  --bx-blue-hover:   #0a5e96;

  /* --------------------------------------------------------------- ink -- */
  --bx-on-dark:        #ffffff;
  --bx-on-dark-muted:  rgba(255, 255, 255, 0.66);
  /* 0.42 composited to #6B6B6B on black: 3.95:1, under WCAG AA's 4.5:1 for
     body text. 0.48 gives #7A7A7A and 4.82:1. */
  --bx-on-dark-faint:  rgba(255, 255, 255, 0.48);
  --bx-on-light:       #0b0b0b;
  --bx-on-light-muted: #4a4f53;
  --bx-on-blue:        #ffffff;
  --bx-on-blue-muted:  rgba(255, 255, 255, 0.80);
  --bx-accent:         #71b0d9;  /* eyebrows and small labels only */

  /* ------------------------------------------------------------- lines -- */
  --bx-line-dark:   rgba(255, 255, 255, 0.13);
  --bx-line-light:  rgba(11, 11, 11, 0.14);
  --bx-line-blue:   rgba(255, 255, 255, 0.18);

  /* -------------------------------------------------------- typography -- */
  --bx-font-sans:  'Geist', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --bx-font-mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bx-text-hero:    clamp(2rem, 3.7vw, 3.5rem);
  --bx-text-h2:      clamp(1.7rem, 3.1vw, 2.6rem);
  --bx-text-h3:      1.05rem;
  --bx-text-stat:    clamp(1.9rem, 3.2vw, 2.5rem);
  --bx-text-body:    0.95rem;
  --bx-text-sm:      0.875rem;
  --bx-text-xs:      0.8rem;
  --bx-text-eyebrow: 0.7rem;

  --bx-leading-tight: 1.16;
  --bx-leading-body:  1.62;
  --bx-tracking-eyebrow: 0.18em;
  --bx-tracking-tight:  -0.015em;

  /* ------------------------------------------------------------ layout -- */
  /* Measured off the mockup: at a 1521px page the content runs 100 -> 1421,
     i.e. a 100px gutter and no centred max-width kicking in until well past
     that. A 1240px container put the headline at x=529 instead of x=100. */
  --bx-max:       1560px;
  --bx-gutter:    clamp(1.25rem, 6.6vw, 100px);
  --bx-section-y: clamp(3.5rem, 6.5vw, 5.5rem);

  --bx-space-1: 4px;   --bx-space-2: 8px;   --bx-space-3: 12px;
  --bx-space-4: 16px;  --bx-space-5: 24px;  --bx-space-6: 32px;
  --bx-space-7: 48px;  --bx-space-8: 64px;

  --bx-radius:    4px;
  --bx-pill:      1000px;
  --bx-radius-btn: 15px;   /* CTA buttons: 229x47, radius 15 (supplied spec) */
  /* The programme rail reserves this much for an open overview panel. Declared
     here, not on .programs-rail: .programs-band reads it too, and a custom
     property set on a child is invisible to its parent — the reclaim silently
     computed to 0. */
  --bx-rail-overhang: 177px;
  --bx-expo:      cubic-bezier(0.16, 1, 0.3, 1);
}