/* ═══════════════════════════════════════════════════════
   tokens.css — общие CSS-переменные для всех страниц.
   AUDIT 2026-05-11 (visual fix C): раньше :root дублировался
   в style.css и rsvp.css — каждая правка цвета требовала
   синхронизации двух файлов. Теперь один источник правды.
   Подключается ПЕРЕД style.css / rsvp.css в HTML.
═══════════════════════════════════════════════════════ */

/* AUDIT FIX 2026-05-12 (polish): self-hosted Cormorant Italic — preloaded
   woff2 (134KB) перебивает гонку с Google Fonts CDN на первом hero-рендере,
   убирает italic-FOUT. Upright Cormorant + Bodoni остаются на Google Fonts. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-italic.woff2') format('woff2-variations'),
       url('/fonts/cormorant-italic.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* ━━━ Палитра — Bordeaux Velvet & Bone ━━━ */
  --milk:           #F2E8D2;  /* bone — настоящая хлопковая бумага Crane */
  --warm-beige:     #E8DCC0;
  --chocolate:      #2A0E14;  /* aubergine ink */
  --chocolate-deep: #1A0610;  /* deepest aubergine — overlays */
  --wine:           #5C1A2A;  /* claret */
  --taupe:          #6F5847;
  --taupe-light:    #C4AD98;  /* letterpress paper edge */
  --gold:           #B89968;  /* antique gold */
  --gold-dark:      #8E7344;  /* aged darker antique */
  --gold-strong:    #6F5530;  /* deep antique — AA-compliant eyebrows (5.5:1 на milk) */
  --gold-highlight: #C9A773;  /* bright halo gold */
  /* AUDIT 2026-05-12: единственный cool-полутон палитры — для Weather PS
     («петербургское небо в августе»). Применять только в этом блоке. */
  --smoke:          #7E8C8E;  /* smoke — cool blue-grey hairline */
  --smoke-deep:     #4C5A5C;  /* deep cool grey — eyebrow на milk */

  /* ━━━ RGB-компоненты для rgba() ━━━ */
  --chocolate-rgb:      42, 14, 20;
  --chocolate-deep-rgb: 26, 6, 16;
  --wine-rgb:           92, 26, 42;
  --milk-rgb:           242, 232, 210;
  --warm-beige-rgb:     232, 220, 192;
  --gold-rgb:           184, 153, 104;
  --gold-highlight-rgb: 201, 167, 115;
  --smoke-rgb:          126, 140, 142;  /* для alpha-washes в Weather PS */

  /* ━━━ 7-уровневая alpha-шкала ━━━ */
  --alpha-shadow:      0.06;
  --alpha-shadow-soft: 0.10;
  --alpha-line-faint:  0.16;
  --alpha-line:        0.28;
  --alpha-line-strong: 0.50;
  --alpha-text-muted:  0.72;
  --alpha-text:        0.90;

  /* ━━━ Lines & emboss ━━━ */
  --line:        rgba(var(--chocolate-rgb), 0.18);
  --line-light:  rgba(var(--chocolate-rgb), 0.10);
  --line-gold:   rgba(var(--gold-rgb), 0.32);
  --emboss:        rgba(var(--gold-rgb), 0.26);
  --emboss-strong: rgba(var(--gold-rgb), 0.38);

  /* ━━━ Paper layers ━━━ */
  --paper-base:  rgba(var(--milk-rgb), 0.82);
  --paper-focal: rgba(var(--warm-beige-rgb), 0.92);

  /* ━━━ Типографика ━━━ */
  --f-display:        'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
  --f-title:          'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif;
  --f-body:           'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
  --f-accent:         'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
  --f-script:         'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
  --f-script-display: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;

  /* ━━━ Spacing scale (8px grid) ━━━ */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.5rem;    /* 24px */
  --sp-6:  2rem;      /* 32px */
  --sp-7:  2.5rem;    /* 40px */
  --sp-8:  3rem;      /* 48px */
  --sp-9:  4rem;      /* 64px */
  --sp-10: 5rem;      /* 80px */

  /* ━━━ Font-size scale (Major Third ~1.25×) ━━━ */
  --fs-caps:      11px;
  --fs-footnote:  13px;
  --fs-mini:      13px;  /* мерж с footnote */
  --fs-small:     15px;
  --fs-body-sm:   15px;  /* мерж со small */
  --fs-body:      18px;
  --fs-body-lg:   18px;  /* мерж с body */
  --fs-em:        22px;
  --fs-h3:        22px;  /* мерж с em */
  --fs-h3-lg:     28px;
  --fs-h2-sm:     28px;  /* мерж с h3-lg */
  --fs-h2:        36px;
  --fs-display:   48px;

  /* ━━━ Width scale ━━━ */
  --w-xs:  320px;
  --w-sm:  460px;
  --w-md:  580px;
  --w-lg:  760px;
  --w-xl:  1000px;

  /* ━━━ Motion ━━━ */
  --ease-house: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   200ms;
  --dur-base:   400ms;
  --dur-slow:   800ms;
  --dur-scene:  1600ms;
}

/* ━━━ Mobile ≤768px — единый цветовой сдвиг для всех страниц ━━━
   Плашки чуть светлее фона (+2% L), тот же taupe hue — без жёлтого оттенка.
   Применяется к index.html и rsvp.html через общий tokens.css. */
@media (max-width: 768px) {
  :root {
    --milk:          #F2E8D2;   /* bone paper — десктопный тон, без белёсости */
    --warm-beige:    #EDE4D2;   /* тёплый бежевый — body/фон чуть светлее десктопа */
    --milk-rgb:      242, 232, 210;
    --warm-beige-rgb:237, 228, 210;
  }
}