/* Practice + Pixel: design tokens.
   Settled values. See CLAUDE.md before changing anything here. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* ---- Colour -------------------------------------------------------
     Charcoal and bone are ink and swap with the background.
     Ice is the accent and is identical in both modes.              */
  --charcoal: #2E3238;
  --bone:     #EDE9E3;
  --ice:      #2F97B2;
  --paper:    #F5F6F7;
  --night:    #16181C;
  --muted:    #6E747C;
  --rule:     #DEE2E5;

  --bg:       var(--paper);
  --ink:      var(--charcoal);
  --ink-soft: var(--muted);

  /* ---- Type ---------------------------------------------------------
     One family. Scale is a major third (1.25) off a 17px base.      */
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --t-xs:  0.694rem;
  --t-sm:  0.833rem;
  --t-base: 1rem;
  --t-md:  1.25rem;
  --t-lg:  1.563rem;
  --t-xl:  1.953rem;
  --t-2xl: 2.441rem;
  --t-3xl: 3.052rem;

  --leading-tight: 1.15;
  --leading-body:  1.6;

  --measure: 68ch;

  /* ---- Spacing ------------------------------------------------------
     The mark is 10-unit squares on a 12-unit pitch. The layout
     rhythm runs off that same 12, so page structure and logo
     structure share one grid.                                       */
  --s-1: 0.75rem;   /* 12 */
  --s-2: 1.5rem;    /* 24 */
  --s-3: 2.25rem;   /* 36 */
  --s-4: 3rem;      /* 48 */
  --s-6: 4.5rem;    /* 72 */
  --s-8: 6rem;      /* 96 */
  --s-12: 9rem;     /* 144 */

  --unit: 0.75rem;  /* one grid unit: logo clear space, gutters */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       var(--night);
    --ink:      var(--bone);
    --ink-soft: #9AA1A9;
    --rule:     #2C3138;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: var(--leading-body);
  font-weight: 400;
}

h1, h2, h3 {
  line-height: var(--leading-tight);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}

p { max-width: var(--measure); }

a { color: var(--ice); }

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}

img, svg { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}