/* ===========================================================================
   Zerolook design tokens
   Ported verbatim from the design system bundle
   (_ds/zerolook-design-system-…/tokens/*.css), with one change: the four
   licensed brand faces are self-hosted from brand/ and lead every stack, so
   the Google Fonts substitutes are no longer fetched. Token names are unchanged.
   =========================================================================== */

/* --- Faces ---------------------------------------------------------------- */
/* Static faces declared across the 400–700 range: requesting 700 matches the
   face itself rather than triggering synthetic bold, which is how the design
   renders (Violet Sans headlines are the regular cut). */
@font-face {
  font-family: "Violet Sans";
  src: url("../brand/VioletSans-Regular.otf") format("opentype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Opening Hour Sans";
  src: url("../brand/OpeningHoursSans-Regular.otf") format("opentype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Dotspitch";
  src: url("../brand/Dotspitch.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Intodotmatrix";
  src: url("../brand/Intodotmatrix.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* --- Colour ------------------------------------------------------------ */
  /* Base palette — verbatim from the brand palette slide */
  --zl-sky-mist: #D5E8FD;
  --zl-cloud-grey: #EEEEEE;
  --zl-engine-blue: #007AE8;
  --zl-signal-red: #995048;
  --zl-black: #000000;
  --zl-white: #FFFFFF;

  /* Engine Blue ramp — derived for UI states only, never for brand surfaces */
  --zl-blue-tint: #EAF3FE;
  --zl-blue-mid: #7FB8F3;
  --zl-blue-press: #0063BC;

  /* Hairlines — the system has no shadows, so rules carry all separation */
  --zl-line: #00000014;
  --zl-line-strong: #00000029;
  --zl-line-invert: #FFFFFF29;

  /* Semantic aliases */
  --surface-page: var(--zl-white);
  --surface-soft: var(--zl-sky-mist);
  --surface-neutral: var(--zl-cloud-grey);
  --surface-card: var(--zl-white);
  --surface-invert: var(--zl-black);
  --surface-brand: var(--zl-engine-blue);

  --text-primary: var(--zl-black);
  --text-secondary: #00000099;
  --text-invert: var(--zl-white);
  --text-data: var(--zl-engine-blue);
  --text-accent: var(--zl-signal-red);

  --border-card: var(--zl-line);
  --border-input: var(--zl-line-strong);
  --border-invert: var(--zl-line-invert);

  --accent-signal: var(--zl-signal-red);
  --focus-ring: var(--zl-engine-blue);

  /* The blue bloom — off-centre radial, no hard stops, no second hue */
  --bloom: radial-gradient(120% 100% at 72% 45%, #007AE8 0%, #7FB8F3 35%, #D5E8FD 62%, #FFFFFF 100%);
  --bloom-soft: radial-gradient(90% 90% at 78% 40%, #007AE8 0%, #9CC8F6 40%, #E8F2FE 70%, #FFFFFF 100%);

  /* --- Type -------------------------------------------------------------- */
  /* Four faces, four jobs. */
  --font-display: "Violet Sans", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Opening Hour Sans", "Archivo", system-ui, sans-serif;
  --font-micro: "Dotspitch", "Martian Mono", ui-monospace, monospace;
  --font-data: "Intodotmatrix", "DotGothic16", ui-monospace, monospace;

  /* Display — Violet Sans, tight leading, sentence case, hard full stops */
  --display-xl-size: 80px;  --display-xl-lh: 0.98;  --display-xl-ls: -0.02em;
  --display-lg-size: 56px;  --display-lg-lh: 1.02;  --display-lg-ls: -0.018em;
  --display-md-size: 40px;  --display-md-lh: 1.05;  --display-md-ls: -0.014em;
  --display-sm-size: 28px;  --display-sm-lh: 1.1;   --display-sm-ls: -0.01em;

  /* Body — Opening Hour Sans, generous leading, max ~62ch */
  --body-lg-size: 19px;     --body-lg-lh: 1.5;
  --body-md-size: 16px;     --body-md-lh: 1.55;
  --body-sm-size: 14px;     --body-sm-lh: 1.5;
  --measure-body: 62ch;

  /* Micro — Dotspitch, uppercase, wide tracking */
  --micro-size: 12px;       --micro-lh: 1.2;    --micro-ls: 0.12em;
  --micro-sm-size: 11px;    --micro-sm-ls: 0.14em;

  /* Data — Intodotmatrix, every numeral in the system */
  --data-xl-size: 64px;     --data-lg-size: 40px;
  --data-md-size: 24px;     --data-sm-size: 15px;
  --data-ls: 0.04em;

  --weight-display: 700;
  --weight-body: 400;
  --weight-body-strong: 600;
  --weight-micro: 500;

  /* --- Space ------------------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --page-gutter: 48px;
  --page-max: 1280px;
  --section-y: 96px;
  --stack-tight: var(--space-3);
  --stack: var(--space-5);
  --stack-loose: var(--space-7);

  /* --- Geometry ---------------------------------------------------------- */
  /* Near-zero radius. 4px is the ceiling for cards; controls are square. */
  --radius-none: 0px;
  --radius-card: 4px;
  --radius-pill: 999px; /* black delta badges only */

  --border-hairline: 1px;

  /* No shadows anywhere in the system. */
  --shadow-none: none;

  /* --- Motion ------------------------------------------------------------ */
  /* Mechanical, short, no bounce. Instrument readouts, not UI flourish. */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 90ms;
  --dur-base: 160ms;
  --dur-slow: 280ms;
}