/* RP Digital Consulting, tokens. Bron: DESIGN.md. Donker is de standaard, licht volgt prefers-color-scheme of data-theme="light". */
:root {
  color-scheme: dark;

  /* kleur, donker */
  --color-paper: oklch(16% 0.01 60);
  --color-paper-2: oklch(21% 0.012 60);
  --color-ink: oklch(96% 0.008 70);
  --color-muted: oklch(74% 0.02 60);
  --color-rule: oklch(32% 0.015 60);
  --color-field-border: oklch(58% 0.02 60);
  --color-accent: oklch(68% 0.19 45);
  --color-accent-ink: oklch(16% 0.01 60);
  --color-accent-text: oklch(72% 0.17 45);
  --color-focus: oklch(72% 0.17 45);
  --color-error: oklch(72% 0.17 22);

  /* letters */
  --font-display: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
  --font-num: "Fragment Mono", ui-monospace, monospace;
  --display-weight: 700;
  --body-weight: 400;
  --strong-weight: 600;
  --tracking-display: -0.02em;

  /* schaal: 16 px basis, verhouding 1.25 vanaf tablet */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --text-3xl: clamp(2.125rem, 1.5rem + 3.2vw, 3.5rem);
  --text-4xl: clamp(2.5rem, 1.6rem + 4.6vw, 4.75rem);
  --text-figure: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --text-hero-xl: clamp(2.5rem, 1rem + 6vw, 6rem);
  --leading-body: 1.55;
  --leading-tight: 1.06;
  --measure: 62ch;

  /* ruimte, 4 px raster */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1200px;
  --section-gap: clamp(64px, 10vw, 128px);

  /* vorm */
  --radius-control: 4px;
  --radius-card: 8px;
  --rule-width: 1px;
  --control-height: 48px;
  --focus-ring: 2px;
  --focus-offset: 3px;

  /* beweging */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 800ms;
  --stagger: 70ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.65, 0, 0.15, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-paper: oklch(98.5% 0.004 80);
    --color-paper-2: oklch(95% 0.008 70);
    --color-ink: oklch(20% 0.015 50);
    --color-muted: oklch(45% 0.02 50);
    --color-rule: oklch(85% 0.01 60);
    --color-field-border: oklch(58% 0.02 50);
    --color-accent: oklch(64% 0.19 45);
    --color-accent-ink: oklch(20% 0.015 50);
    --color-accent-text: oklch(50% 0.16 42);
    --color-focus: oklch(50% 0.16 42);
    --color-error: oklch(48% 0.19 27);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-paper: oklch(98.5% 0.004 80);
  --color-paper-2: oklch(95% 0.008 70);
  --color-ink: oklch(20% 0.015 50);
  --color-muted: oklch(45% 0.02 50);
  --color-rule: oklch(85% 0.01 60);
  --color-field-border: oklch(58% 0.02 50);
  --color-accent: oklch(64% 0.19 45);
  --color-accent-ink: oklch(20% 0.015 50);
  --color-accent-text: oklch(50% 0.16 42);
  --color-focus: oklch(50% 0.16 42);
  --color-error: oklch(48% 0.19 27);
}