/* ==========================================================================
   Tokens
   Fonts are self-hosted (no requests to Google), which keeps the site
   GDPR-friendly and fast. Schibsted Grotesk is SIL OFL licensed.
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../../assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../../assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../../assets/fonts/schibsted-grotesk-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Runes for the terminal in the about section (Noto Sans Runic, SIL OFL). Only downloaded when
   runic characters are on screen, thanks to unicode-range. */
@font-face {
  font-family: "Noto Sans Runic";
  src: url("../../assets/fonts/noto-sans-runic-runic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+16A0-16FF;
}

/* Code punctuation (< > / = ( ) ; ') from the same family, so it matches the runes */
@font-face {
  font-family: "Noto Sans Runic";
  src: url("../../assets/fonts/noto-sans-runic-punctuation.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-0040, U+005F;
}

:root {
  /* Palette: pine tar, fjord water, sea spray and ochre paint */
  --tar: #2b211b; /* text, dark surfaces */
  --tar-soft: #4a372b; /* secondary wood tone */
  --fjord: #1d4f5c; /* primary: links, buttons */
  --fjord-deep: #143a44; /* hover / pressed */
  --ocean: #0f2e38; /* deep sea: the performance band */
  --spray: #e9eeec; /* page background */
  --spray-dim: #dbe3e0; /* subtle fills, rules */
  --ochre: #c98e2a; /* accent fills only (not for text on light bg) */
  --white: #ffffff;
  --muted: #55605d; /* secondary text, 6.3:1 on --spray */
  --error: #a3261b;
  --focus: var(--tar); /* focus ring; switched to ochre on dark sections */

  /* Type */
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.94rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 0.9vw, 2.25rem);
  --step-3: clamp(2.2rem, 1.7rem + 2.2vw, 3.6rem);
  --step-hero: clamp(2.9rem, 1.6rem + 5.6vw, 6.4rem);

  /* Space & layout */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: clamp(4rem, 3rem + 4vw, 7rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --max: 76rem;
  --measure: 62ch;

  --radius-s: 4px;
  --radius-m: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}