/*
 * Label 7 — semantic design tokens (Layer 2)
 * Maps onto theme.json presets (Layer 1: --wp--preset--*).
 * Components reference --sc-* only; never --wp--preset-- directly.
 *
 * Values come from Figma "Label Zeven" (Home, node 150:5).
 * Typography follows the designer's readability update (2026-10-19): body 20/1.3,
 * notes in Instrument Sans 18, footer 16. Secondary text is still 50% black.
 *
 * Type sizes and text measures are in rem so they follow the reader's browser font
 * setting (Figma px / 16). Spacing, radii and the logo stay in px.
 */

:root {
  /* --- Colour: base --- */
  --sc-color-ink:   var(--wp--preset--color--zwart, #000000);
  --sc-color-paper: var(--wp--preset--color--grijs, #ebe9e1);
  --sc-color-white: var(--wp--preset--color--wit, #ffffff);

  /* --- Colour: brand (the seven bouwstenen) --- */
  --sc-color-licht-roze: var(--wp--preset--color--licht-roze, #ffb7bd);
  --sc-color-groen:      var(--wp--preset--color--groen, #61cc71);
  --sc-color-paars:      var(--wp--preset--color--paars, #9f96ec);
  --sc-color-blauw:      var(--wp--preset--color--blauw, #1ca3eb);
  --sc-color-oranje:     var(--wp--preset--color--oranje, #fe7c16);
  --sc-color-geel:       var(--wp--preset--color--geel, #ffe633);
  --sc-color-roze:       var(--wp--preset--color--roze, #ff7b97);

  /* --- Colour: secondary text (pending: design uses 50% opacity) --- */
  --sc-color-muted:         rgb(0 0 0 / 0.5);
  --sc-color-muted-on-dark: rgb(255 255 255 / 0.5);

  /* --- Glass (header pills over imagery) --- */
  --sc-glass:      rgb(255 255 255 / 0.5);
  --sc-glass-blur: blur(6px);

  /* --- Typography --- */
  --sc-font-sans:  var(--wp--preset--font-family--instrument-sans, "Instrument Sans", sans-serif);
  --sc-font-serif: var(--wp--preset--font-family--crimson-text, "Crimson Text", serif);

  --sc-text-xs:  var(--wp--preset--font-size--xs, 0.875rem);
  --sc-text-sm:  var(--wp--preset--font-size--sm, 1rem);
  --sc-text-md:  var(--wp--preset--font-size--md, 1.125rem);
  --sc-text-lg:  var(--wp--preset--font-size--lg, 1.25rem);
  --sc-text-xl:  var(--wp--preset--font-size--xl, 1.5rem);
  /* WordPress kebab-cases the slug: "2xl" becomes --wp--preset--font-size--2-xl. */
  --sc-text-2xl: var(--wp--preset--font-size--2-xl, 2rem);
  --sc-text-3xl: var(--wp--preset--font-size--3-xl, 2.625rem);
  --sc-text-4xl: var(--wp--preset--font-size--4-xl, 3.5625rem);

  --sc-text-body: var(--sc-text-lg);   /* running text: 20px at the default 16px root (Figma "Paragraph Serif") */

  --sc-leading-display: 0.94;
  --sc-leading-body:    1.3;
  --sc-tracking-tight:  -0.02em;
  --sc-stretch-display: 92%;
  --sc-stretch-text:    96%;

  /* --- Spacing --- */
  --sc-gutter:        clamp(16px, 2.25vw, 32px);
  --sc-space-xs:      8px;
  --sc-space-s:       16px;
  --sc-space-m:       32px;
  --sc-space-l:       clamp(48px, 5.5vw, 80px);
  --sc-space-section: clamp(64px, 7vw, 100px);

  /* --- Shape --- */
  --sc-radius:        4px;
  --sc-radius-button: 2px;
  --sc-control-height: 40px;

  /* --- Layout --- */
  --sc-width-wide: 1376px;
  --sc-width-text: 1205px;
}