/* ==========================================================================
   MAS.AI — design tokens (Phase 0)
   Source of truth for colour, type and layout scale.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour ----
     --mas-red: TEMPORARY fallback from the Phase 0 spec (#C00008).
     No official logo/SVG source exists yet; the approved art-direction raster
     samples at #AC0000–#C40000, which is consistent with this value.
     Replace with the value from the official logo file when supplied. */
  --mas-red: #c00008;
  --mas-red-hover: #a00007;
  --ink: #080808;
  --body: #444444;
  --muted: #6e6e6e;   /* spec #777 is 4.48:1 on white (fails AA); #6e6e6e = 5.1:1 */
  --line: #e6e6e6;
  --surface: #f6f6f6;
  --white: #ffffff;

  --focus-ring: 2px solid var(--ink);
  --focus-offset: 3px;

  /* ---- Type ---- */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --stretch-display: 108%;
  --stretch-ui: 108%;

  /* ---- Layout ----
     --u is the composition unit: 1px at the 1440px reference viewport,
     scaling down proportionally below it, capped at 1px above it.
     Desktop composition values are written as calc(N * var(--u)) so the
     static frame stays faithful to the approved 1440px art direction. */
  --ref-width: 1440px;
  --u: min(1px, calc(100vw / 1440));
  --gutter: calc(112 * var(--u));     /* content edge  (~115px in reference) */
  --safety: calc(80 * var(--u));      /* structural line (~80px in reference) */
  --header-h: 76px;

  --radius-sm: 3px;

  /* ---- Motion (Phase 1 grammar: CUT / SLIDE / SCALE / ASSEMBLE / LOCK) ---- */
  --ease-mech: cubic-bezier(0.7, 0, 0.2, 1);
  --dur-ui: 180ms;
}

@media (max-width: 1023.98px) {
  :root {
    --gutter: 20px;
    --safety: 20px;
    --header-h: 64px;
  }
}