/* ═══════════════════════════════════════════════════════
   ZTG design tokens — єдине джерело правди.
   Кольори, типографіка, spacing, radius, motion.
   Жоден компонент не містить сирих значень — лише var(--ztg-*).
   Формат нового запису: Назва / Значення / Токен / Роль (див. CLAUDE.md 4.1).
   ═══════════════════════════════════════════════════════ */

:root {

  /* ── Колір: Пшеничне полотно / Оброблена земля / Врожайне золото ──
     Палітра з CLAUDE.md 4.2. canvas і ink-inverse навмисно мають
     однаковий hex (дві різні ролі: фон світлої секції й текст на
     темній) — не спрощувати в один токен. */
  --ztg-color-canvas: #F6EEDD;        /* Пшеничне полотно — фон світлих секцій */
  --ztg-color-dark: #2B2117;          /* Оброблена земля — фон темних секцій */
  --ztg-color-accent: #C79A44;        /* Врожайне золото — бордер/лінія/дрібна заливка, ніколи заливка секції */
  --ztg-color-accent-2: #9C4A2E;      /* Черепиця — рідкісний другорядний акцент, тег/hover */
  --ztg-color-ink: #211B14;           /* Чорнило на пшениці — текст на canvas */
  --ztg-color-ink-inverse: #F6EEDD;   /* Полотно на темному — текст на dark */
  --ztg-color-muted: #8A7F6B;         /* Приглушений льон — декоративне (іконки, hairline), НЕ текст */
  --ztg-color-muted-text: #6E6353;    /* Приглушений льон, текстовий варіант — темніший, проходить WCAG AA на caption-розмірах на обох фонах */
  --ztg-color-accent-blue: #2B4C6F;   /* Український синій, опційно — лише як заливка бейджа/чипа, ніколи як текст на dark (провалює контраст) */
  --ztg-color-muted-inverse: #CBBFA8; /* Приглушене полотно на темному — другорядний текст на dark-секціях і на затемненому фото (hero) */

  /* Контрастні обмеження (не токени, нагадування):
     --ztg-color-accent як колір ТЕКСТУ — лише на --ztg-color-dark (6.10:1). На canvas — 2.24:1, провал.
     --ztg-color-accent-2 як колір ТЕКСТУ — лише на --ztg-color-canvas (5.30:1). На dark — 2.58:1, провал. */

  /* ── Типографіка: три ролі ──
     Дисплей: Fraunces (кирилиця підтверджена). Текст: Source Sans 3
     (заміна General Sans — кирилиця в General Sans не підтверджена,
     Fontshare фокусується на латиниці; деталі — CLAUDE.md 4.3).
     Мітки/цифри: JetBrains Mono — частина сигнатурного елемента
     "Кадастрова лінія": табличні моно-цифри для кожної суми/коду. */
  --ztg-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ztg-font-text: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ztg-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --ztg-weight-display-regular: 500;
  --ztg-weight-display-bold: 600;
  --ztg-weight-text-regular: 400;
  --ztg-weight-text-bold: 600;
  --ztg-weight-mono-regular: 400;
  --ztg-weight-mono-bold: 500;

  /* Тип-шкала. Fluid через clamp() — низ під 375px, верх під ~1600px+ */
  --ztg-text-hero: clamp(3rem, 1.4rem + 9vw, 8.5rem);          /* 48 → 136px, hero H1 — oversized, референс ZettaJoule */
  --ztg-text-display: clamp(2.5rem, 1.9rem + 2.8vw, 4.5rem);   /* 40 → 72px, block H2 */
  --ztg-text-heading: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);  /* 28 → 40px, H3/card titles */
  --ztg-text-subheading: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem); /* 22 → 28px, цитати/суми */
  --ztg-text-lead: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);     /* 19 → 22px, вступні абзаци */
  --ztg-text-body: 1.0625rem;    /* 17px, основний текст */
  --ztg-text-body-sm: 0.9375rem; /* 15px, другорядний текст */
  --ztg-text-caption: 0.8125rem; /* 13px, підписи */
  --ztg-text-label: 0.75rem;     /* 12px, mono eyebrow/мітки/коди */

  --ztg-leading-tight: 1.05;   /* дисплейні заголовки */
  --ztg-leading-snug: 1.25;    /* H3, subheading */
  --ztg-leading-body: 1.6;     /* основний текст */
  --ztg-leading-label: 1.3;    /* мітки, підписи */

  --ztg-tracking-display: -0.01em;  /* Fraunces на розмірі block H2 — легкий негативний трекінг */
  --ztg-tracking-hero: -0.02em;     /* Fraunces на hero/poster-розмірі — трохи щільніше, ніж H2. Свідомо консервативніше за -0.04em референсу Creative Giants: те значення каліброване під геометричний sans (Switzer) вагою 300, на серифі Fraunces тотожна щільність ламає форму літер */
  --ztg-tracking-body: 0;
  --ztg-tracking-label: 0.14em;     /* mono eyebrow/лейбли — розріджений, uppercase */

  /* ── Spacing: базова одиниця 8px ── */
  --ztg-space-1: 8px;
  --ztg-space-2: 16px;
  --ztg-space-3: 24px;
  --ztg-space-4: 32px;
  --ztg-space-5: 48px;
  --ztg-space-6: 64px;
  --ztg-space-7: 80px;
  --ztg-space-8: 112px;

  /* Лейаут-рівні поверх базової шкали */
  --ztg-width-content: 1024px;              /* колонка читабельного тексту */
  --ztg-width-wide: 1440px;                 /* верхня межа широких композицій усередині full-bleed секцій */
  --ztg-gutter: clamp(20px, 4vw, 40px);      /* бічні відступи */
  --ztg-section-gap: clamp(96px, 13vw, 176px); /* вертикальний ритм між блоками */

  /* ── Radius: гостре за замовчуванням, pill лише для кнопок/тегів ── */
  --ztg-radius-sharp: 0px;
  --ztg-radius-pill: 999px;

  /* ── Motion (CLAUDE.md 4.5, фіксовані значення) ── */
  --ztg-ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ztg-duration-fast: 200ms;
  --ztg-duration-base: 600ms;
  --ztg-duration-slow: 1000ms;
  --ztg-stagger-unit: 80ms;
}