/* Hallmark · tokens · theme: custom "quaderno a quadretti"
 * vibe: quaderno a quadretti, biro blu, penna rossa della maestra, evidenziatore giallo
 * paper oklch(97.4% 0.014 88) · ink oklch(27% 0.07 262) · accent oklch(50% 0.17 27)
 * display: Bricolage Grotesque 600/800 · body: Public Sans 400/600 (lo stesso carattere dei PDF)
 * axes: light / grotesk-sans / warm
 * Dark mode = "lavagna": ardesia verde scura, gesso chiaro.
 */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap;
  src: url("/fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600 700; font-display: swap;
  src: url("/fonts/public-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  /* Colori — carta, inchiostro, penna rossa, evidenziatore */
  --color-paper: oklch(97.4% 0.014 88);
  --color-paper-2: oklch(94.6% 0.02 88);
  --color-sheet: oklch(99.6% 0.003 90);
  --color-grid: oklch(88% 0.035 238 / 0.55);
  --color-ink: oklch(27% 0.07 262);
  --color-ink-2: oklch(42% 0.045 258);
  --color-rule: oklch(84% 0.025 250);
  --color-accent: oklch(50% 0.17 27);
  --color-margin: oklch(62% 0.15 22 / 0.55);
  --color-highlight: oklch(90% 0.13 98);
  --color-on-highlight: oklch(27% 0.07 262);
  --color-on-ink: oklch(98% 0.01 88);
  --color-focus: oklch(50% 0.17 27);
  --color-shadow: oklch(35% 0.05 262 / 0.16);

  /* Caratteri */
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;

  /* Scala tipografica */
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --text-display: clamp(2.375rem, 1.6rem + 3.8vw, 4.25rem);

  /* Spazi (scala da 4 pt) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --page-gutter: 16px;
  --measure: 38rem;
  --page-max: 72rem;
  --grid-step: 20px;

  /* Forme */
  --radius-sm: 4px;
  --radius-md: 8px;
  --rule-hair: 1px;

  /* Movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
}

@media (min-width: 48rem) {
  :root { --page-gutter: 40px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(25% 0.022 165);
    --color-paper-2: oklch(29% 0.024 165);
    --color-sheet: oklch(97% 0.006 90);
    --color-grid: oklch(60% 0.02 165 / 0.22);
    --color-ink: oklch(94% 0.012 95);
    --color-ink-2: oklch(80% 0.02 120);
    --color-rule: oklch(42% 0.02 165);
    --color-accent: oklch(78% 0.12 35);
    --color-margin: oklch(68% 0.12 28 / 0.45);
    --color-highlight: oklch(86% 0.14 98);
    --color-on-ink: oklch(22% 0.03 165);
    --color-focus: oklch(86% 0.14 98);
    --color-shadow: oklch(10% 0.02 165 / 0.45);
  }
}