/* Komplett Management — design tokens (approved specimen, 18 Oct 2026). */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(../fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(../fonts/literata-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(../fonts/literata-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme: light; /* single theme: the logo colours are print primaries on white */

  /* colour — sampled from the logo. Contrast on --paper in comments. */
  --ink: #231F20;        /* all text · 15.6:1 */
  --graphite: #5C5759;   /* secondary text · 6.8:1 */
  --paper: #FAFAF8;      /* page ground */
  --stone: #EFEDE9;      /* alternate ground · ink 13.9:1, graphite 6.1:1 */
  --rule: #D8D4D0;       /* hairlines only, never text */
  --red: #EE1B23;        /* fields + text ≥ 24px / 19px bold only · 4.17:1 */
  --yellow: #F5D000;     /* fields only, always under ink · 10.8:1 */
  --blue: #0F49A0;       /* links, focus, contact panel · 8.1:1 */
  --on-ink: #FAFAF8;     /* text on ink · 15.6:1 */
  --on-ink-muted: #C9C4C5; /* secondary text on ink · 9.9:1 */

  /* type */
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Literata", Georgia, serif;

  /* modular scale: 1.2 on phones, 1.333 from 768px. Base 17px → 18px */
  --step--1: .833rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.44rem;
  --step-3: 1.728rem;
  --step-4: 2.074rem;
  --step-5: 2.488rem;

  /* spacing (base 4, roughly ×1.5) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 36px; --s7: 56px; --s8: 84px; --s9: 128px;

  --gutter: 16px;
  --measure: 66ch;
  --tilt: -8deg;         /* the logo's tilted square */
}

@media (min-width: 768px) {
  :root {
    --step-1: 1.333rem; --step-2: 1.777rem; --step-3: 2.369rem; --step-4: 3.157rem; --step-5: 4.209rem;
    --gutter: 32px;
  }
}
@media (min-width: 1440px) { :root { --gutter: 56px; } }