/* ============================================================================
   Steeplejack Robotics — design tokens
   ----------------------------------------------------------------------------
   Every colour here was sampled from docs/mission.png (the approved brand
   design) rather than chosen. No colour outside this file should appear in
   the stylesheets — if you need a new one, add it here with a note on where
   it came from.
   ============================================================================ */

:root {
  /* --- Brand colour ------------------------------------------------------
     Sampled as the weighted-average of the dark and saturated pixel clusters
     in docs/mission.png. --navy is the wordmark, body text and line art;
     --orange is the single accent and appears in the "ROBOTICS" submark,
     the rules, the "OUR MISSION" divider and the robot's joints.          */
  --navy: #051e3b;
  --orange: #ef8c22;

  /* Orange is only 2.43:1 against the page background, so it fails WCAG AA
     for text at any size. --orange-ink is the same hue darkened to exactly
     4.50:1, and is used wherever orange carries *words*. Pure --orange is
     reserved for graphics, rules, icons and the logotype (logotypes are
     exempt from contrast requirements under WCAG 1.4.3).                   */
  --orange-ink: #b35f00;

  /* Tints of the accent, for panel backgrounds and hover washes. */
  --orange-wash: #fdf4e9;
  --orange-edge: #f6d9b4;

  /* --- Neutrals ----------------------------------------------------------
     --bg is the near-white of the source image (#FEFEFE), pulled a fraction
     cooler so the navy sits on it comfortably. --rule is the vertical
     divider grey between the four pillars. --ink-soft is secondary prose;
     it clears AA at 5.6:1.                                                */
  --bg: #fcfcfd;
  --bg-sunk: #f5f6f8;
  --rule: #d5d8de;
  --rule-soft: #e8eaee;
  --ink: var(--navy);
  --ink-soft: #5a6779;

  /* --- Type --------------------------------------------------------------
     Montserrat stands in for the geometric sans of the wordmark; Source Sans
     3 matches the humanist pillar text and carries the white paper.        */
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;

  /* Fluid type scale. Each step is clamp(min, preferred, max) so the hero can
     shrink to fit a 320px viewport without a single media query. The vw
     coefficients are tuned so the scale hits its max at ~1600px.           */
  --step--1: clamp(0.82rem, 0.78rem + 0.20vw, 0.95rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.18rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  --step-3: clamp(1.6rem, 1.25rem + 1.75vw, 2.6rem);
  --step-4: clamp(1.9rem, 1.3rem + 3vw, 3.5rem);

  /* --- Spacing -----------------------------------------------------------
     A fluid spacing scale on the same principle as the type scale.         */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.63rem);
  --space-xs: clamp(0.75rem, 0.69rem + 0.3vw, 0.94rem);
  --space-s: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.38rem + 0.6vw, 1.88rem);
  --space-l: clamp(2rem, 1.84rem + 0.8vw, 2.5rem);
  --space-xl: clamp(3rem, 2.76rem + 1.2vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.68rem + 1.6vw, 5rem);
  --space-3xl: clamp(6rem, 5.5rem + 2.4vw, 7.5rem);

  /* --- Measure and layout ------------------------------------------------ */
  --measure: 68ch; /* 65–75 characters, the comfortable reading width */
  --page-max: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* --- Motion ------------------------------------------------------------
     One easing curve and two durations, so nothing feels ad hoc.           */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-slow: 620ms;

  /* --- Elevation ---------------------------------------------------------
     Shadows are tinted with the brand navy rather than pure black.         */
  --shadow-s: 0 1px 2px rgb(5 30 59 / 0.06), 0 2px 8px rgb(5 30 59 / 0.05);
  --shadow-m: 0 4px 12px rgb(5 30 59 / 0.08), 0 12px 32px rgb(5 30 59 / 0.08);
  --shadow-l: 0 8px 20px rgb(5 30 59 / 0.12), 0 24px 56px rgb(5 30 59 / 0.14);

  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;
}