/* ShoDe Design System — токени.
   Шрифти підключає inc/enqueue.php (wp_enqueue_style), а не @import.
   Один файл замість п'яти (colors / fonts / typography / spacing / motion). */


:root {
  /* ── шрифти ───────────────────────────────────────────── */
  --font-display: Unbounded, sans-serif;
  --font-body: Onest, system-ui, sans-serif;

  /* ── база кольорів ────────────────────────────────────── */
  --ink-900: #16111C;
  --surface-800: #1F1828;
  --plum-700: #2E2340;
  --plum-500: #6E4E9E;
  --muted-600: #4E4159;
  --lilac-400: #9C8BAE;
  --lilac-300: #B6A4C6;
  --lilac-200: #CFC2DC;
  --lilac-100: #E8DCF2;
  --plum-400: #6E5C80;
  --plum-800: #332942;
  --paper: #F2ECF6;
  --salt: #D8F25E;
  --salt-hi: #EAFB9A;

  /* ── семантика ────────────────────────────────────────── */
  --bg-page: var(--ink-900);
  --surface-card: var(--surface-800);
  --surface-badge: var(--plum-700);
  --surface-overlay: var(--plum-500);

  --text-primary: var(--paper);
  --text-secondary: var(--lilac-300);
  --text-tertiary: var(--lilac-400);
  --text-quiet: var(--lilac-200);
  --text-disabled: var(--muted-600);
  /* Лід, проза, великі описи — світліші за основний текст */
  --text-lead: var(--lilac-100);
  /* Календар: підписи, що мають відступити на другий план */
  --text-faint: var(--plum-400);
  /* Дні поза поточним місяцем — майже зливаються з тлом */
  --text-ghost: var(--plum-800);

  --accent: var(--salt);
  --accent-hover: var(--salt-hi);
  --on-accent: var(--ink-900);
  /* Акцент напівпрозорим: контур ореолу й пунктир. Значення дублює
     --salt навмисно — це фолбек, нижче воно перераховується з --accent. */
  --accent-line: rgba(216, 242, 94, .3);
  --accent-dash: rgba(216, 242, 94, .5);

  --border-hairline: rgba(203, 184, 221, .14);
  --border-control: rgba(203, 184, 221, .28);
  --border-faint: rgba(203, 184, 221, .08);
  --focus-ring: var(--salt);

  --photo-tint: var(--plum-500);
  --photo-tint-opacity: .22;

  /* ── типографіка ──────────────────────────────────────── */
  /* Великі кеглі плинні: значення збігаються з тими, що компоненти
     задають у себе. Верхня межа — розмір із макета на десктопі. */
  --text-display-xl: clamp(40px, 8vw, 80px);
  --text-display-l: clamp(38px, 7vw, 72px);
  --text-display-m: clamp(28px, 4.4vw, 48px);
  --text-display-s: clamp(24px, 3.4vw, 32px);
  --text-date-hero: clamp(56px, 10vw, 96px);
  --text-date-cell: clamp(17px, 2.1vw, 30px);
  --text-title-l: 24px;
  --text-title-m: 20px;
  --text-body-l: 19px;
  --text-body-m: 17px;
  --text-body-s: 15px;
  --text-meta: 13px;
  --text-micro: 12px;

  --lh-display: .92;
  --lh-title: 1.2;
  --lh-body: 1.6;
  --lh-prose: 1.7;

  --ls-display: -.03em;
  --ls-date: -.05em;
  --ls-title: -.01em;
  --ls-kicker: .2em;
  --ls-badge: .08em;
  --ls-caps: .12em;

  --weight-display: 800;
  --weight-strong: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  --measure-prose: 62ch;
  --measure-note: 66ch;

  /* ── розміри ──────────────────────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 28px;
  --space-4: 48px;
  --space-5: 80px;
  --space-6: 128px;
  /* Відступ між великими блоками сторінки — теж плинний */
  --block-gap: clamp(72px, 9vw, 112px);
  --container: 1240px;
  /* Поля тягнуться разом з екраном: 16px на телефоні → 24px на десктопі */
  --gutter: clamp(16px, 3.2vw, 24px);
  --tap-min: 44px;
  --daycell-w: 76px;
  --daycell-h: 92px;
  --time-col: 68px;
  --radius: 0px;

  /* ── рух ──────────────────────────────────────────────── */
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* Якщо браузер уміє color-mix — рахуємо напівпрозорий акцент із самого
   --accent. Тоді зміна акценту тягне за собою й контури, і пунктир.
   Робимо це окремим блоком, бо друге оголошення змінної старий браузер
   теж прийняв би — і лишився б зі значенням, якого не розуміє. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);
    --accent-dash: color-mix(in srgb, var(--accent) 50%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}