/* profbuh.com.ua: design tokens. Single source: DESIGN.md (Gate 2.5, 2026-11-09).
   Components read only these variables; no hex/px values in markup.
   Hex values are fallbacks for browsers without oklch(); oklch overrides below. */

:root {
  /* Palette (12 tokens) */
  --c-ink: #12302c;
  --c-muted: #4d5f5b;
  --c-paper: #f2eee5;
  --c-surface: #ffffff;
  --c-line: #dcd5c7;
  --c-sand: #e8e0d0;
  --c-sage: #d9ead2;
  --c-aqua: #d3e9ec;
  --c-petrol: #0e4a55;
  --c-accent: #16795a;
  --c-accent-strong: #0e5c43;
  --c-danger: #b3261e;

  /* Derived (not new colors: alpha of palette tokens) */
  --c-on-dark: #ffffff;
  --c-on-dark-soft: var(--c-aqua);
  --c-line-on-dark: rgba(211, 233, 236, 0.28);
  --shadow-raise: 0 8px 24px rgba(18, 48, 44, 0.10);

  /* Typography */
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-display: 52px;
  --t-h2: 40px;
  --t-h3: 26px;
  --t-h4: 20px;
  --t-lead: 20px;
  --t-body: 18px;
  --t-small: 15px;
  --t-kicker: 13px;
  --t-price: 40px;

  --lh-display: 1.1;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-h4: 1.3;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-small: 1.5;

  --tr-display: -0.02em;
  --tr-h2: -0.015em;
  --tr-h3: -0.01em;
  --tr-kicker: 0.08em;
  --tr-price: -0.01em;

  --measure: 68ch;

  /* Spacing (base 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 112px;

  --section-y: var(--s-10);
  --tile-pad: var(--s-6);
  --tile-gap: 20px;

  /* Layout */
  --max-width: 1200px;
  --gutter: 24px;
  --header-h: 72px;
  --utilbar-h: 36px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Controls */
  --control-h: 48px;
  --focus-ring: 3px solid var(--c-accent);
  --focus-offset: 2px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --c-ink: oklch(28.5% 0.037 184);
    --c-muted: oklch(46.9% 0.023 180);
    --c-paper: oklch(95.0% 0.013 87);
    --c-surface: oklch(100% 0 0);
    --c-line: oklch(87.5% 0.020 85);
    --c-sand: oklch(90.9% 0.023 85);
    --c-sage: oklch(91.8% 0.037 136);
    --c-aqua: oklch(91.9% 0.024 207);
    --c-petrol: oklch(37.8% 0.060 213);
    --c-accent: oklch(51.4% 0.100 166);
    --c-accent-strong: oklch(42.3% 0.083 166);
    --c-danger: oklch(50.1% 0.178 29);
    --c-line-on-dark: oklch(91.9% 0.024 207 / 0.28);
    --shadow-raise: 0 8px 24px oklch(28.5% 0.037 184 / 0.10);
  }
}

@media (max-width: 768px) {
  :root {
    --t-display: 34px;
    --t-h2: 28px;
    --t-h3: 22px;
    --t-h4: 18px;
    --t-lead: 18px;
    --t-body: 17px;
    --t-small: 14px;
    --t-kicker: 12px;
    --t-price: 32px;

    --section-y: var(--s-8);
    --tile-pad: var(--s-5);
    --gutter: 16px;
    --header-h: 64px;
    --control-h: 52px;
  }
}