/* ============================================================================
   TOKENS — every design knob lives here.
   Change a value in this file and it propagates across the whole site.
   Nothing below this file should hard-code a color, size, or timing.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- The module ----------------------------------------------------------
     Everything on the page is sized in multiples of --grid so that boxes,
     gutters, and type all land on the same dot lattice.                     */
  --grid: 8px;
  --grid-2: calc(var(--grid) * 2);   /*  16 */
  --grid-3: calc(var(--grid) * 3);   /*  24 */
  --grid-4: calc(var(--grid) * 4);   /*  32 */
  --grid-6: calc(var(--grid) * 6);   /*  48 */
  --grid-8: calc(var(--grid) * 8);   /*  64 */
  --grid-12: calc(var(--grid) * 12); /*  96 */
  --grid-16: calc(var(--grid) * 16); /* 128 */

  /* --- The dotted ground -------------------------------------------------- */
  --dot-pitch: calc(var(--grid) * 1.5); /* 12 — coarser than the layout module */
  --dot-size: 1px;
  --dot-ink: rgba(17, 17, 16, 0.18);

  /* --- The line ------------------------------------------------------------
     The other core motif. One weight, used everywhere: rules, boxes, tables. */
  --line-weight: 1px;
  --line-ink: #111110;
  --line-soft: rgba(17, 17, 16, 0.26);
  --rule: var(--line-weight) solid var(--line-ink);
  --rule-soft: var(--line-weight) solid var(--line-soft);

  /* --- Ink ---------------------------------------------------------------- */
  --paper: #fcfcfa;
  /* Every drawn box is filled, so the dot lattice never shows through it.
     Set to var(--paper) instead if you want boxes to disappear into the page. */
  --box-fill: #ffffff;
  --ink: #111110;
  --ink-mid: #56544e;
  --ink-soft: #8a877f;

  /* Held in reserve: interaction states and the one moment of colour in
     FIG. 04. Used nowhere else on purpose.                                  */
  --accent: #1b3fb0;

  /* Annotation red — the mark-up pen. Only FIG. 02 and the bracket that ties
     it to the mission use this, which is what makes the emphasis land.      */
  --flag: #c1272d;

  /* Hover fill for anything drawn on the dot ground. It must be OPAQUE: a
     translucent wash lets the lattice show through the box it is filling,
     which reads as the box turning see-through rather than lighting up.
     The hex is the fallback; the mix supersedes it where supported.         */
  --tint: #f1f4fa;
  --tint: color-mix(in srgb, var(--accent) 6%, var(--box-fill));

  /* --- Type ---------------------------------------------------------------
     Three faces, three jobs:
       mono  — labels, metadata, figures, the typed line   (machine voice)
       serif — statements, headlines, the mission          (editorial voice)
       sans  — job titles, controls, running UI            (neutral voice)   */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
                "Book Antiqua", Charter, Georgia, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               sans-serif;

  --t-label: 0.6875rem;  /* 11 — uppercase mono labels        */
  --t-sm: 0.8125rem;     /* 13 — metadata, captions           */
  --t-base: 1rem;        /* 16 — body                         */
  --t-lead: 1.125rem;    /* 18 — lead paragraphs              */
  --t-h3: 1.25rem;       /* 20                                */
  --t-marker: var(--t-sm); /* 13 — the section markers: Vision, Team, News,
                              Open Roles. A step up from --t-label, not a
                              different kind of type.                        */
  --t-prose: 1.375rem;   /* 22 — the team paragraph, desktop only; the phone
                                 keeps --t-h3 so it matches the figure titles
                                 and the mission above it                    */
  --t-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  /* Sized so the longest hero phrase plus its verb still sets on one line. */
  --t-hero: clamp(1.75rem, 5.2vw, 4.75rem);

  --track-label: 0.14em; /* letter-spacing for uppercase mono  */
  --measure: 68ch;       /* comfortable reading width          */

  /* Height cap on the figures. Shared by .panel__box and the bracket offset —
     they must agree or the bracket stops pointing at FIG. 02.               */
  --fig-cap: 26vh;

  /* --- Structure ---------------------------------------------------------- */
  /* The space under a section's rule, before whatever it introduces. One value
     for all three sections, so none of them reads as spaced differently.
     Fixed rather than scaled: the same measured space under every rule, at
     every window size. The Vision section pays for it out of its own budget —
     the gap falls twice inside that pinned frame, so the mission's type is
     sized around what is left. */
  --head-gap: calc(var(--grid) * 3.5); /* 28 */

  --masthead-h: calc(var(--grid) * 7); /* 56 */
  --page-pad: clamp(var(--grid-2), 3.5vw, var(--grid-8));
  --page-max: 1560px;

  /* --- Motion -------------------------------------------------------------
     Two speeds only. Reveals are slow and calm; interaction is quick.       */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-reveal: 700ms;
  --dur-ui: 160ms;
  --stagger: 55ms; /* per-item delay in a revealed group */
}

/* The design commits to a single light "paper" world on purpose — this is a
   printed-page aesthetic, not a themeable UI. Only the caret respects the
   viewer's motion preference; see base.css. */