/* ============================================================================
   McBride Digital — Phase II design tokens
   Owned by Task 0. Every other task consumes these; nothing else defines a
   colour, a type size, or a spacing step. If you need a value that is not here,
   append the request to SHARED-REQUESTS.md rather than inventing a local one.
   ============================================================================ */

:root {
  /* ---- Brand colour -------------------------------------------------------
     Four tokens, per the brand kit. Everything below is one of these four at a
     reduced alpha — no second hue enters the system. */
  --electric-blue: #249cfa;
  --dark-blue:     #04091d;
  --white:         #ffffff;
  --black:         #000000;   /* reserved; not used by any Phase II page yet */

  /* Electric blue, lightened, for the primary button's hover. Going lighter
     rather than darker keeps the button reading as the live control. */
  --electric-blue-hover: #4bb0ff;

  /* Surfaces. The site is dark-first: --dark-blue is the page, white is ink. */
  --surface:        var(--dark-blue);
  --surface-raised: rgba(255, 255, 255, 0.05);  /* cards on dark */
  --surface-hover:  rgba(255, 255, 255, 0.09);
  --surface-light:  var(--white);               /* the few light sections */
  /* Opaque, for anything that floats over the page and must not let it show
     through — the contact page's listbox popup is the only user so far. */
  --surface-overlay: #0a1024;

  /* The one colour outside the brand four. Errors have to be distinguishable
     from every other state on the page, and none of the four can do that job.
     Kept light enough to clear AAA on --dark-blue: 8.7:1. */
  --danger: #ff8a8a;

  /* Ink. White at descending opacity — never a grey. */
  --ink:         var(--white);
  --ink-muted:   rgba(255, 255, 255, 0.72);
  --ink-subtle:  rgba(255, 255, 255, 0.52);
  --ink-on-light:        var(--dark-blue);
  --ink-on-light-muted:  rgba(4, 9, 29, 0.70);

  /* Lines */
  --line:        rgba(255, 255, 255, 0.12);
  --line-accent: rgba(36, 156, 250, 0.38);
  --line-light:  rgba(4, 9, 29, 0.14);

  /* Accent washes */
  --accent-wash:  rgba(36, 156, 250, 0.10);
  --accent-glow:  rgba(36, 156, 250, 0.30);

  /* ---- Type ---------------------------------------------------------------
     Montserrat throughout, weights 300/400/600/700. Loaded from Google Fonts
     with display=swap in each page head; @fontsource is not an option because
     this repo has no build step and no package manager. */
  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display: clamp(2.75rem, 6vw, 5rem);
  --fs-h2:      clamp(2rem, 4vw, 3rem);
  --fs-h3:      1.5rem;
  --fs-lead:    1.25rem;      /* subheaders and section intros */
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.8125rem;

  /* The type signature: display set tight, eyebrows set wide. The contrast
     between these two is what makes the pages read as one family — keep both
     sides of it. */
  --ls-display: -0.02em;
  --ls-eyebrow:  0.12em;
  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-body:     1.65;

  /* ---- Spacing — 8px base scale ------------------------------------------ */
  --space-1: 0.5rem;   /*  8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-5: 3rem;     /* 48 */
  --space-6: 4rem;     /* 64 */
  --space-7: 6rem;     /* 96 */
  --space-section: clamp(5rem, 10vw, 9rem);

  /* ---- Layout ------------------------------------------------------------ */
  --measure:     1200px;   /* container max width */
  --gutter:      var(--space-3);
  --nav-height:  76px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---- Motion ------------------------------------------------------------
     Every duration here is neutralised under prefers-reduced-motion by
     reset.css, so animations built on these tokens honour the setting for
     free. Do not hard-code a duration. */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:    150ms;
  --dur:         250ms;
  --dur-slow:    650ms;

  /* ---- Focus -------------------------------------------------------------
     One ring, used everywhere, visible on both the dark and the light
     surfaces because it carries its own white outer stroke. */
  --focus-ring: 0 0 0 2px var(--dark-blue), 0 0 0 5px var(--electric-blue);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur:      1ms;
    --dur-slow: 1ms;
  }
}