/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   The only file in this project where a raw color, size, or ratio value is
   written. Everything else composes these.

   The canvas is white. Navy carries the header, the footer, and the full-width
   emphasis bands. Red is the single accent and the only button color.

   Cascade layers are declared here, once, for the whole project.
   ========================================================================== */

@layer reset, tokens, base, layout;

@layer tokens {
  :root {

    /* ----------------------------------------------------------------------
       1. PRIMITIVES

       Approved by the client, 16 September 2026. Derived from the two ad units
       and the color direction the client described. If they ever change, they
       change here and nowhere else, and every text and background pair gets
       re-measured for contrast afterward.
       ---------------------------------------------------------------------- */

    /* Navy: chrome and emphasis bands */
    --navy-950: #05090f;
    --navy-900: #0a1222;
    --navy-800: #101c33;
    --navy-700: #1a2b4a;
    --navy-600: #294066;
    --navy-500: #3d5a8a;

    /* Ambulance red. Display type, rules, fills, and buttons only. */
    --red-700: #9e1119;
    --red-600: #c1121f;
    --red-500: #e01e2b;
    --red-400: #f0434f;

    /* Neutrals. The canvas is --white; --cream is the alternating section. */
    --white: #ffffff;
    --cream: #f7f6f4;
    --neutral-050: #f7f8fa;
    --neutral-100: #eceef2;
    --neutral-200: #d8dce4;
    --neutral-400: #9aa3b2;
    --neutral-600: #5b6577;
    --neutral-800: #2a3240;
    --neutral-900: #161b24;
    --black: #0b0d11;

    --slate-300: #aebccd;


    /* ----------------------------------------------------------------------
       2. TYPE SCALE

       Fluid, mobile-first: the minimum of every clamp is the phone value,
       because the phone view is the design. Interpolation runs 320px to
       1440px.
       ---------------------------------------------------------------------- */

    --step--1: clamp(0.875rem, 0.857rem + 0.089vw, 0.9375rem);
    --step-0:  clamp(1rem, 0.964rem + 0.179vw, 1.125rem);
    --step-1:  clamp(1.125rem, 1.054rem + 0.357vw, 1.375rem);
    --step-2:  clamp(1.375rem, 1.268rem + 0.536vw, 1.75rem);
    --step-3:  clamp(1.625rem, 1.446rem + 0.893vw, 2.25rem);
    --step-4:  clamp(2rem, 1.75rem + 1.25vw, 2.875rem);
    --step-5:  clamp(2.375rem, 1.982rem + 1.964vw, 3.75rem);
    --step-6:  clamp(2.875rem, 2.339rem + 2.679vw, 4.75rem);
    --step-7:  clamp(3.5rem, 2.714rem + 3.929vw, 6.25rem);
    --step-8:  clamp(4.25rem, 3.179rem + 5.357vw, 8rem);

    /* Oswald for display, Inter for body. Both self-hosted variable faces,
       declared in site.css with metric-adjusted fallbacks. */
    --font-display: "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif;
    --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;

    --weight-body: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --weight-display: 700;

    --leading-display: 0.98;
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-body: 1.6;

    --tracking-display: -0.005em;
    --tracking-caps: 0.04em;
    --tracking-body: 0;


    /* ----------------------------------------------------------------------
       3. SPACE

       One fluid scale. The client asked for plenty of white space around the
       call to action and the shared graphics, so the upper end of this scale
       is where sections breathe.
       ---------------------------------------------------------------------- */

    --space-3xs: clamp(0.25rem, 0.232rem + 0.089vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.464rem + 0.179vw, 0.625rem);
    --space-xs:  clamp(0.75rem, 0.696rem + 0.268vw, 0.9375rem);
    --space-s:   clamp(1rem, 0.929rem + 0.357vw, 1.25rem);
    --space-m:   clamp(1.5rem, 1.393rem + 0.536vw, 1.875rem);
    --space-l:   clamp(2rem, 1.857rem + 0.714vw, 2.5rem);
    --space-xl:  clamp(3rem, 2.714rem + 1.429vw, 4rem);
    --space-2xl: clamp(4rem, 3.429rem + 2.857vw, 6rem);
    --space-3xl: clamp(6rem, 5.143rem + 4.286vw, 9rem);

    --measure: 62ch;
    --measure-narrow: 45ch;
    --gutter: var(--space-m);
    --wrapper-max: 72rem;


    /* ----------------------------------------------------------------------
       4. SEMANTIC TOKENS

       The default context is the white canvas. `.band-navy` rebinds the same
       names for the emphasis bands, the header, and the footer, so a section
       that inverts gets correct ink automatically instead of every rule inside
       it having to be restated.

       CONTRAST RULE, enforced by naming
       ---------------------------------
       There is no `--accent` token. The red is `--accent-display`, and it is
       valid only for:
         - type at --step-4 and above
         - rules, bars, slabs, and fills
         - button backgrounds
       It is never valid for body copy, labels, form hints, or links inside
       paragraphs. Saturated red at body size fails AA on white and on navy
       alike, which is why the token is named for the only use that passes.
       ---------------------------------------------------------------------- */

    --surface: var(--white);
    --surface-raised: var(--cream);
    --surface-sunken: var(--neutral-100);
    --ink: var(--neutral-900);
    --ink-muted: var(--neutral-800);
    --ink-subtle: var(--neutral-600);
    --rule: var(--neutral-200);

    --accent-display: var(--red-600);
    --accent-fill: var(--red-600);
    --accent-fill-ink: var(--white);
    --accent-fill-hover: var(--red-700);

    /* Focus ring. Dark on the white canvas; the navy bands rebind it to amber.
       The halo fills the offset gap so the ring always sits against a known
       color rather than against whatever the focused element is painted. */
    --focus-ring: var(--navy-900);
    --focus-ring-halo: var(--white);
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;

    --field-bg: var(--white);
    --field-ink: var(--neutral-900);
    --field-border: var(--neutral-400);
    --field-border-focus: var(--navy-700);
    --error-ink: #a8121b;
    --success-ink: #14532d;

    --radius-none: 0;
    --radius-s: 2px;
    --radius-m: 4px;

    --transition-fast: 120ms;
    --transition-base: 220ms;
  }

  /* Navy emphasis band. Carries the header, the footer, and any full-width
     section that needs to shout. */
  .band-navy {
    --surface: var(--navy-900);
    --surface-raised: var(--navy-800);
    --surface-sunken: var(--navy-950);
    --ink: var(--white);
    --ink-muted: var(--neutral-200);
    --ink-subtle: var(--slate-300);
    --rule: var(--navy-600);

    --accent-display: var(--red-500);
    --accent-fill: var(--red-600);
    --accent-fill-ink: var(--white);
    --accent-fill-hover: var(--red-500);

    --focus-ring: #ffd166;
    --focus-ring-halo: var(--navy-950);

    --error-ink: #ff9aa2;
    --success-ink: #86efac;
  }

  /* Light alternating band, for sections that need separation without weight. */
  .band-cream {
    --surface: var(--cream);
    --surface-raised: var(--white);
  }
}