/* ==========================================================================
   comanda.agency — Design tokens
   Джерело правди: дизайн-система власника в claude.ai/design
   («Avocado Agency Design System», colors_and_type.css). Значення ТОЧНІ —
   зняті з дизайн-системи 2026-06-18, не оцінні. Кольори — семпл з лого-знаку.
   Шрифти: дизайн-система вказує Fraunces (заголовки) + Manrope (текст), АЛЕ
   Fraunces НЕ має кирилиці — українські заголовки падали б на Georgia. Тому
   для заголовків беремо Playfair Display (повна кирилиця, та сама редакторська
   антиква-естетика) — як у власних каруселях власника. Текст — Manrope.
   Увесь UI сайту читає ТІЛЬКИ ці змінні — не хардкодимо кольори по файлах.
   Файл-двійник: ../../../src/brand-tokens.css (тримати синхронним).
   ========================================================================== */

:root {
  /* ---------- Колір: бренд ---------- */
  --c-forest:        #00300F;   /* основний темний, фон бренду — «скатертина» */
  --c-forest-deep:   #001F08;   /* трохи темніший, для шарування */
  --c-forest-soft:   #0E4A22;   /* hover/active на forest */
  --c-marigold:      #FDD401;   /* головний акцент / CTA / заливка знаку */
  --c-marigold-deep: #E5BE00;   /* hover на marigold */

  /* ---------- Колір: нейтральні (теплі) ---------- */
  --c-cream:         #F6F1E4;   /* альтернативний світлий фон, тепліший за білий */
  --c-cream-deep:    #ECE5D2;   /* hover на cream */
  --c-offwhite:      #FBFAF7;   /* контент-щільні поверхні */
  --c-paper:         #FFFFFF;   /* чистий білий, коли треба */
  --c-charcoal:      #1A1A17;   /* основний текст на світлому */
  --c-charcoal-soft: #4A4A44;   /* вторинний текст на світлому */
  --c-mute:          #8A8A82;   /* третинний текст, плейсхолдери */
  --c-line:          rgba(0, 48, 15, 0.12);     /* бордери на світлому */
  --c-line-dark:     rgba(246, 241, 228, 0.14); /* бордери на forest */

  /* ---------- Колір: семантичні ---------- */
  --c-tomato:        #E2543A;   /* помилка / попередження (<5% поверхні) */
  --c-tomato-soft:   #F8E5DF;
  --c-basil:         #2E7D3D;   /* успіх */
  --c-basil-soft:    #E1EFE3;
  --c-saffron:       #E89B2C;   /* нотатка */

  /* ---------- Передній план / фон (семантичні) ---------- */
  --fg-1: var(--c-charcoal);              /* основний текст на світлому */
  --fg-2: var(--c-charcoal-soft);         /* вторинний текст на світлому */
  --fg-3: var(--c-mute);                  /* третинний текст */
  --fg-on-dark-1: var(--c-cream);         /* основний текст на forest */
  --fg-on-dark-2: rgba(246,241,228,0.72); /* вторинний текст на forest */
  --fg-on-dark-3: rgba(246,241,228,0.50); /* третинний текст на forest */
  --fg-accent: var(--c-marigold);

  --bg-1: var(--c-offwhite);              /* дефолтний фон сторінки */
  --bg-2: var(--c-cream);                 /* тепліший альт-фон */
  --bg-3: var(--c-cream-deep);            /* hover, ненав'язлива заливка */
  --bg-dark: var(--c-forest);
  --bg-dark-2: var(--c-forest-deep);

  /* ---------- Типографіка: родини ---------- */
  --ff-display: 'Playfair Display', 'PT Serif', Georgia, 'Times New Roman', serif;
  --ff-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Типографіка: шкала (1.25, база 16px) ---------- */
  --fs-eyebrow:  12px;
  --fs-caption:  13px;
  --fs-body:     16px;
  --fs-lead:     20px;
  --fs-h3:       24px;
  --fs-h2:       36px;
  --fs-h1:       56px;
  --fs-display:  96px;

  /* міжрядкові */
  --lh-display: 1.05;
  --lh-heading: 1.18;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  /* трекінг */
  --tr-eyebrow: 0.08em;
  --tr-display: -0.02em;
  --tr-heading: -0.015em;
  --tr-body:    0;

  /* ---------- Ритм (8pt) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  48px;
  --sp-9:  56px;
  --sp-10: 64px;
  --sp-12: 96px;
  --sp-14: 112px;
  --sp-16: 128px;

  /* ---------- Радіуси ---------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-pill: 999px;

  /* ---------- Тіні (теплі, одношарові) ---------- */
  --shadow-1: 0 1px 2px rgba(0, 48, 15, 0.08);
  --shadow-2: 0 8px 24px rgba(0, 48, 15, 0.10);
  --shadow-3: 0 24px 64px rgba(0, 48, 15, 0.16);
  --shadow-inset-line: inset 0 0 0 1px var(--c-line);

  /* ---------- Рух ---------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      400ms;
  --dur-page:      600ms;

  /* ---------- Лейаут ---------- */
  --shell-max:   1280px;
  --read-max:    640px;
  --nav-height:  64px;
}

/* Поважаємо системне «менше руху» */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.001ms; --dur-base: 0.001ms; --dur-slow: 0.001ms; --dur-page: 0.001ms; }
}

/* ==========================================================================
   Базові стилі елементів — стартова основа, перекривай під поверхню.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
.display {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.caption { font-size: var(--fs-caption); color: var(--fg-3); line-height: 1.4; }
code, .mono { font-family: var(--ff-mono); font-size: 0.92em; }

em, .italic-display { font-style: italic; }

a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }

/* виділення тексту */
::selection { background: var(--c-marigold); color: var(--c-forest); }

/* фокус для доступності (клавіатура) */
:focus-visible { outline: 2px solid var(--c-marigold); outline-offset: 2px; border-radius: 4px; }