/*
 * tokens.css — JEDYNE źródło wartości wizualnych w CSS.
 * Wartości 1:1 z frontmatter `design.md` (SSOT). Dryf wyłapuje `scripts/check-tokens.ts`.
 * Komponenty używają WYŁĄCZNIE tych zmiennych — zero hardkodowanych hexów w `site.css`.
 */
:root {
  color-scheme: light;

  /* --- colors (design.md → frontmatter.colors) --- */
  --color-primary: #1f1d1a;
  --color-secondary: #5c574f;
  --color-tertiary: #b4552b;
  --color-neutral: #fdfcfa;
  --color-paper-tint: #f7f4ef;
  --color-paper-deep: #f5f1ea;
  --color-ink-faint: #8a8379;
  --color-ink-code: #2a2724;
  --color-hairline: #e4ded4;
  --color-hairline-strong: #d2c9bb;
  --color-accent-soft: #f4e7dd;
  --color-accent-ink: #9e4423;
  --color-wash-1: #efe7da;
  --color-wash-2: #dcd2c4;
  --color-on-accent: #ffffff;

  /* --- fonts (frontmatter.typography.*.fontFamily — dwie rodziny) --- */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

  /* --- typography (frontmatter.typography) --- */
  --type-display-size: 2.5rem;
  --type-display-weight: 300;
  --type-display-lh: 1.08;
  --type-display-ls: -0.022em;
  --type-h1-size: 2rem;
  --type-h1-weight: 300;
  --type-h1-lh: 1.12;
  --type-h1-ls: -0.018em;
  --type-h2-size: 1.5rem;
  --type-h2-weight: 400;
  --type-h2-lh: 1.25;
  --type-h2-ls: -0.012em;
  --type-h3-size: 1.25rem;
  --type-h3-weight: 400;
  --type-h3-lh: 1.3;
  --type-h3-ls: -0.008em;
  --type-label-size: 0.8125rem;
  --type-label-weight: 500;
  --type-label-lh: 1.4;
  --type-label-ls: 0.08em;
  --type-lead-size: 1.1875rem;
  --type-lead-weight: 400;
  --type-lead-lh: 1.7;
  --type-body-size: 1.0625rem;
  --type-body-weight: 400;
  --type-body-lh: 1.75;
  --type-body-sm-size: 0.9375rem;
  --type-body-sm-weight: 400;
  --type-body-sm-lh: 1.65;
  --type-caption-size: 0.8125rem;
  --type-caption-weight: 400;
  --type-caption-lh: 1.55;
  --type-code-size: 0.9375rem;
  --type-code-weight: 400;
  --type-code-lh: 1.6;

  /* --- rounded (frontmatter.rounded) --- */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* --- spacing (frontmatter.spacing) --- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* --- layout (design.md → tabela "Tokeny layoutu") --- */
  --measure-prose: 68ch;
  --measure-narrow: 56ch;
  --page-max: 720px;
  --page-x: clamp(20px, 5vw, 40px);
  --header-h: 56px;

  /* --- motion (design.md → tabela "Tokeny ruchu") --- */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 260ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Skalowanie responsywne: JEDEN media query, bez clamp() (design.md → Typography) */
@media (min-width: 768px) {
  :root {
    --type-display-size: 3.25rem;
    --type-h1-size: 2.5rem;
  }
}

/* Ruch nigdy nie jest nośnikiem informacji → wyłączenie niczego nie psuje */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}