/* Street on the company site (INFRA-0019): the colour, face and type roles
   the site draws, mirrored by hand from admin-web/src/theme/tokens.css under
   the same names (the FEAT-0037 precedent — a shared package is the on-hold
   design-sync question). The look is these values: site.css names a role,
   never a literal, and the look gate (site/checks/look-gate.mjs) fails on
   one outside this file. Light only, like both apps. */

/* The four OFL faces, latin subset, copied from the Fontsource packages
   admin-web pins. The version is in the file name, so a bump is a new name
   and the deploy's `immutable` on fonts/ stays honest. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/archivo-black-latin-400-normal-5.3.0.woff2') format('woff2');
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-latin-400-normal-5.3.0.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk Variable';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-wght-normal-5.3.0.woff2')
    format('woff2-variations');
}

@font-face {
  font-family: 'Schibsted Grotesk Variable';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/schibsted-grotesk-latin-wght-normal-5.3.0.woff2')
    format('woff2-variations');
}

:root {
  /* Mirrored roles, by the admin's names. */
  --background: #e9e7e0; /* paper */
  --card: #ffffff;
  --ink: #0e0e0e;
  --accent: #e8ff2b; /* acid: a fill behind ink, or text on inverse only */
  --on-accent: #0e0e0e;
  --inverse: #0e0e0e;
  --on-inverse: #f4f2ec; /* cream */
  --ink-muted: #5e5b55; /* meta lines, labels */
  --hairline: #0e0e0e24; /* ink at 14%: the facts card's row dividers */

  /* Site-only roles. */
  --inverse-soft: #f4f2ecbf; /* cream at 75%: the caption on the ink tile */
  /* The hatch behind the call to action is denser than the admin's: it
     fills a band, not a table cell. */
  --hatch-ink: #0e0e0e14; /* ink at 8% */
  --hatch: repeating-linear-gradient(
    135deg,
    var(--hatch-ink) 0 4px,
    transparent 4px 10px
  );

  /* Faces: the admin's four, same stacks. */
  --face-display: 'Archivo Black', 'Arial Black', sans-serif;
  --face-stamp: 'Anton', Impact, sans-serif;
  --face-number: 'Space Grotesk Variable', system-ui, sans-serif;
  --face-ui: 'Schibsted Grotesk Variable', system-ui, -apple-system, sans-serif;

  /* Type roles, as `font` shorthands at their 1440 size (the canvas's ST7
     ramp); a narrower container changes `font-size` only. Case and tracking
     are the component's. Body text never under 16px, nothing under 12px. */
  --type-name: 400 clamp(72px, 15.4cqw, 222px) / 0.88 var(--face-display);
  --type-mark: 400 24px/1 var(--face-display);
  --type-nav: 400 13px/1.2 var(--face-display);
  --type-rule: 400 14px/1.2 var(--face-display);
  --type-lead: 700 28px/1.3 var(--face-ui);
  --type-audience: 400 19px/1.5 var(--face-ui);
  --type-body: 400 17px/1.55 var(--face-ui);
  --type-status: 700 15px/1.3 var(--face-number);
  --type-ticker: 400 22px/1 var(--face-stamp);
  --type-numeral: 400 36px/1 var(--face-stamp);
  --type-fact: 400 64px/0.95 var(--face-stamp);
  --type-tag: 700 13px/1.4 var(--face-number);
  --type-card-title: 400 19px/1.15 var(--face-display);
  --type-item-title: 400 20px/1.15 var(--face-display);
  --type-button: 400 16px/1 var(--face-display);
  --type-button-quiet: 400 14px/1 var(--face-display);
  --type-pitch: 600 20px/1.45 var(--face-ui);
  --type-pitch-address: 700 15px/1.4 var(--face-number);
  --type-footer: 400 15px/1.7 var(--face-number);
  --type-footer-name: 700 16px/1.7 var(--face-number);
  --type-copyright: 400 14px/1.4 var(--face-number);
  --type-page-title: 400 56px/1 var(--face-display);
  --type-sub: 700 14px/1.4 var(--face-number);
  --type-fact-value: 500 20px/1.4 var(--face-number);
  --type-made: 400 19px/1.6 var(--face-ui);
  --type-doc-title: 400 48px/1 var(--face-display);
  --type-toc: 700 15px/1.4 var(--face-number);
  --type-doc-heading: 400 22px/1.15 var(--face-display);
  --type-doc-body: 400 18px/1.65 var(--face-ui);
  --type-code: 400 160px/0.9 var(--face-stamp);
  --type-not-found: 400 44px/1 var(--face-display);

  /* Focus: ink on light surfaces; the ink block sets it to cream. Never
     acid — invisible on paper. */
  --focus: var(--ink);
}