/* ==========================================================================
   SIM MASTER — DESIGN TOKENS
   Brand colours are extracted from the Sim Master logo (see CLAUDE.md §8).
   Nothing outside this file should hard-code a colour, radius or duration.
   ========================================================================== */

:root {
  /* ---- Brand primitives ------------------------------------------------ */
  --color-black: #000000;
  --color-deep-navy: #002329;
  --color-red: #ff0000;
  --color-cyan: #00c9ff;
  --color-cyan-light: #63ddff;
  --color-white: #ffffff;

  /* ---- Derived surfaces -------------------------------------------------
     A short ramp between black and deep navy. Keeping every surface on this
     ramp is what stops the page reading as "generic dark theme".            */
  --surface-void: #000305;
  --surface-base: #04090b;
  --surface-raised: #071316;
  --surface-panel: #0a1c20;
  --surface-inset: #00171b;

  /* ---- Hairlines & borders -----------------------------------------------
     Red-tinted now that red is the primary accent — every card border,
     dropdown hairline and divider on the site routes through these three,
     so this is the single biggest lever for the red-as-primary redesign. */
  --line-faint: rgba(232, 19, 14, 0.08);
  --line-soft: rgba(232, 19, 14, 0.16);
  --line-strong: rgba(232, 19, 14, 0.34);
  --line-neutral: rgba(255, 255, 255, 0.12);

  /* ---- Text ------------------------------------------------------------ */
  --text-primary: #f4f7f8;
  --text-secondary: rgba(244, 247, 248, 0.66);
  /*
    0.52, not 0.44. At 0.44 this measured 4.12:1 against the dark surfaces —
    under the 4.5:1 WCAG 2.2 AA threshold for body-size text, and it is used
    for every small label, hint and caption on the site. 0.52 measures ~4.7:1
    on --surface-base and ~5.2:1 on the lighter --surface-panel.
  */
  --text-muted: rgba(244, 247, 248, 0.52);
  /*
    Red, not cyan: this is the small mono "eyebrow" label colour used on
    every section heading, plus link-hover and category-tag text sitewide,
    so it is the main lever that makes red read as the site's primary accent.
    Reuses --action-text (6.0:1 on --surface-base) rather than a new value.
  */
  --text-accent: var(--action-text);
  /*
    Kept as a named role rather than inlining --color-white at each call site:
    it marks "a heading that sits brighter than --text-primary body copy", and
    every rig name, service title and section sub-head routes
    through it. It was cream (#fee6c2) until the owner asked for pure white
    across the site.
  */
  --text-warm: var(--color-white);
  --text-on-light: #04090b;

  /* ---- Action ----------------------------------------------------------
     One red cannot do both jobs at WCAG AA, so there are two.

     --action is a FILL that carries white text. White on #f5140f measured
     4.21:1, under the 4.5:1 threshold; #e8130e measures 4.63:1 and is still
     unmistakably racing red. Hover and press go DARKER rather than lighter —
     any lighter red drops white text back below 4.5:1 — with the lift and
     glow carrying the "engaged" feel instead.

     --action-text is red used AS TEXT on the dark surfaces. #e8130e on
     --surface-base is only 4.33:1, so small red labels use the lighter
     #ff4a42, which measures 6.0:1.                                          */
  --action: #e8130e;
  --action-hover: #c9100b;
  --action-press: #a30d09;
  --action-text: #ff4a42;
  --action-glow: rgba(232, 19, 14, 0.42);

  /* ---- Focus --------------------------------------------------------------
     Deliberately still blue: a focus ring that matched the red hover/active
     colour would be very hard to tell apart from ordinary interaction state.
     Keeping focus visually distinct from --action is also where "blue
     details" earns its keep functionally, not just decoratively. */
  --focus-ring: var(--color-cyan-light);
  --focus-ring-offset: var(--surface-base);

  /* ---- State ------------------------------------------------------------ */
  --state-error: #ff5a52;
  --state-error-bg: rgba(245, 20, 15, 0.1);
  --state-success: #33e0a4;
  --state-success-bg: rgba(51, 224, 164, 0.1);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Saira Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /*
    Numerals only. Saira Condensed's figures are narrow and slightly humanist,
    which reads soft at statistic size; Rajdhani is squared-off with straight
    stems and flat terminals, so big numbers land like a timing-board readout.
    Scoped to the stats block — it is not a fourth general-purpose family.
  */
  --font-numeric: "Rajdhani", "Saira Condensed", "Arial Narrow", sans-serif;

  /* Fluid type scale — clamp() so nothing needs a breakpoint to stay sane. */
  --fs-mono-label: clamp(0.625rem, 0.58rem + 0.2vw, 0.75rem);
  --fs-caption: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-body-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-body: clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  --fs-h2: clamp(2rem, 1.3rem + 3vw, 4rem);
  --fs-h1: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem);
  --fs-display: clamp(3.25rem, 1.2rem + 8.2vw, 9rem);
  --fs-stat: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);

  --lh-tight: 0.92;
  --lh-snug: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.08em;
  --tracking-mono: 0.18em;

  /* ---- Space (4px base, fluid at the top end) --------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3.5rem, 2rem + 5vw, 6rem);
  --space-3xl: clamp(5rem, 2.5rem + 8vw, 9rem);
  --space-section: clamp(3.25rem, 1.25rem + 5.5vw, 6.5rem);

  /* ---- Layout ----------------------------------------------------------- */
  --shell-max: 84rem;      /* 1344px — main content column */
  --shell-wide: 96rem;     /* 1536px — full-bleed-ish media */
  --shell-text: 46rem;     /* 736px — comfortable reading measure */
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  /* Bumped from 4.5rem now that the contact strip above the nav is gone —
     the header is the only bar at the top of the page, so it can afford to
     read as a slightly more substantial anchor. */
  --header-h: 5.25rem;

  /* ---- Radius (restrained — CLAUDE.md §8 warns off pill-shaped UI) ------ */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  /* Buttons are the one deliberate exception: a CTA reads as more clickable
     with a real, friendly curve than the sharp instrument-panel radius used
     for cards and hairlines everywhere else. */
  --radius-btn: 11px;

  /* ---- Elevation --------------------------------------------------------*/
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 32px 80px -24px rgba(0, 0, 0, 0.9);
  --shadow-glow-cyan: 0 0 0 1px rgba(0, 201, 255, 0.25), 0 8px 40px -8px rgba(0, 201, 255, 0.28);
  --shadow-glow-red: 0 8px 32px -8px var(--action-glow);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-drive: cubic-bezier(0.16, 0.84, 0.24, 1);
  /* Shared by the intro's smoke front and the backdrop wipe so the two travel
     in lockstep — mismatched easing makes the smoke outrun the reveal. */
  --ease-smoke: cubic-bezier(0.42, 0.04, 0.3, 1);

  --dur-instant: 90ms;
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-reveal: 800ms;
  --dur-intro: 2200ms;

  /* ---- Z-index scale ---------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 150;
  --z-intro: 900;
  --z-skip: 1000;
}

/* Every duration collapses for users who ask for reduced motion. Components
   read these variables rather than hard-coding times, so this single block
   neutralises the whole site's motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
    --dur-intro: 1ms;
  }
}