/* External Skeleton · Stage 3 · design tokens
   Джерело істини: «Токени і час.dc.html» (блок 1a) + «Прототип Сьогодні.dc.html».
   Тема темна — єдина. Світлої теми в системі немає навмисно. */

:root {
  color-scheme: dark;

  /* --- нейтральні (7) ------------------------------------------------ */
  --bg-0: #171411;        /* фон/0 · полотно */
  --bg-1: #1f1b16;        /* фон/1 · поверхня */
  --bg-2: #2a241d;        /* фон/2 · піднята поверхня */
  --line: #3b342a;        /* лінія · межі, треки, поділки */
  --divider: #2a241d;     /* розділювач рядків списку */
  --text-1: #ede7dc;      /* текст/1 · головний */
  --text-2: #a99f8f;      /* текст/2 · другорядний (усі підписи) */
  --text-3: #6f6759;      /* текст/3 · лише вимкнений стан */

  /* --- зони · єдині насичені кольори системи -------------------------
     Колір = ступінь недоторканності слота. Ніколи не «провал». */
  --zone-red: #de5248;    /* зона/червона · недоторканні */
  --zone-orange: #e08b3d; /* зона/оранжева · майже недоторканні */
  --zone-yellow: #d9b83f; /* зона/жовта · гнучкі */
  --zone-neutral: var(--line); /* між слотами — нейтральна смуга */

  /* --- інверсний акцент (світла кнопка на темному) ------------------- */
  --on-light: var(--bg-0);
  --surface-light: var(--text-1);

  /* --- типографіка --------------------------------------------------- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-display: 28px;   --lh-display: 34px;   /* дисплей · 600 */
  --fs-heading: 20px;   --lh-heading: 26px;   /* заголовок · 600 */
  --fs-text: 16px;      --lh-text: 24px;      /* текст · 400 */
  --fs-caption: 13px;   --lh-caption: 16px;   /* підпис · mono */
  --fs-micro: 11px;     --lh-micro: 14px;     /* мікро · mono caps */
  --ls-micro: 0.12em;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* --- сітка · база 4 px --------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-12: 48px;

  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-14: 14px;
  --radius-round: 50%;

  /* --- екрани -------------------------------------------------------- */
  --page-max-mobile: 430px;
  --page-pad-mobile: 20px;
  --page-max-desktop: 1140px;
  --page-pad-desktop: 32px;
  --side-col: 320px;
  --col-gap: 48px;
  --touch-min: 48px;

  /* --- фокус клавіатури ---------------------------------------------- */
  --focus-width: 2px;
  --focus-color: var(--text-1);
  --focus-offset: 3px;

  /* --- час: тривалості анімацій -------------------------------------- */
  --dur-tick: 1s;         /* маркер «зараз», смуга слота */
  --dur-tick-ease: linear;
  --dur-ring: 0.6s;       /* перефарбування поділок кільця */

  /* --- шкала дня ------------------------------------------------------ */
  --day-window-start: 8;  /* 08:00 — синхронно з DAY_START_MIN в app.js */
  --day-window-end: 24;   /* 24:00 — синхронно з DAY_END_MIN в app.js;
                             вечір (фінансова година 21:00, сон 22:30)
                             має бути в межах шкали */

  /* --- кільце таймера (сегментоване, від 96 px) ----------------------- */
  --ring-size: 192px;
  --ring-inset: 30px;
  --tick-w: 3.5px;
  --tick-h: 15px;
  --tick-top: 4px;

  /* --- мінідонат (суцільний, до 96 px) ------------------------------- */
  --mini-size: 40px;
  --mini-hole: 60%;
}