/*
 * Токени AdCreative (референс T1–T4). Власник — Крок 0; блоки лише читають.
 * Кольори бренду клієнта сюди не потрапляють: вони — дані (свотчі, стіли, відео).
 * Тема — атрибут `data-theme` на <html> (theme-boot.js, lib/theme.js): світла — `:root`,
 * темна (1a «Графіт») — `:root[data-theme="dark"]` нижче; T2–T4 від теми не залежать.
 */
:root {
  color-scheme: light;

  /* T1 · Поверхні */
  --paper: #f5f3ee; /* фон сторінки, старт, топбар, таймлайн */
  --chat: #f1efe9; /* панель діалогу */
  --stage: #f8f7f3; /* права панель (сцена) */
  --card: #fcfbf8; /* картки, композер, панель рішень */
  --track-2: #e7e3da; /* сцени на треку сценарію */
  --track-3: #d4cec2;

  /* T1 · Текст і акценти */
  --ink: #151412; /* ЛИШЕ текст і гліфи. Заливки/рамки/прогрес — токени нижче */
  --ink-2: #3a3833; /* вторинний текст, лід-абзаци */
  --muted: #6e6a63; /* підписи, eyebrow, мета (4.85:1 на --paper, 4.68:1 на --chat) */
  --accent: #d4402a; /* REC: плейхед, ромб очікування, busy-точка, hover primary */
  --danger: #b8331f; /* текст помилки */
  --ok: #2f8f5b; /* «на зв'язку» */
  --on-accent: #ffffff; /* текст на --accent (≥ 10.5px / 600) */

  /* Ролі колишнього --ink. У світлій = #151412 / #f5f3ee, як було. */
  --fill-strong: #151412; /* інверсна заливка: primary, бульбашка, обраний chip/seg/тайл, round, ::selection */
  --on-fill-strong: #f5f3ee; /* текст/гліф на --fill-strong і на hover-акценті */
  --edge-strong: #151412; /* активна/hover-рамка, рамка меню, лінія полів, підсумкові лінії */
  --focus-ring: #151412; /* outline :focus-visible */
  --progress: #151412; /* пройдено/готово: тіки, ромб done, смуги, скраббер, хвиля, крапка */

  /* T1 · Лінії */
  --line: rgba(21, 20, 18, 0.1); /* розділювачі, рамки панелей */
  --line-strong: rgba(21, 20, 18, 0.16); /* рамки ghost-кнопок, чипів, полів */
  --line-soft: rgba(21, 20, 18, 0.12); /* рамки карток у чаті, трек .bar */
  --line-tile: rgba(21, 20, 18, 0.14); /* рамка тайлів формату і лого (C6, X2) */
  --line-dashed: rgba(21, 20, 18, 0.25); /* пунктир «Додати фото» (C7), тег знижки в чеку */
  --tick: rgba(21, 20, 18, 0.2); /* непройдені тіки таймлайну */
  --diamond-idle: rgba(21, 20, 18, 0.45); /* рамка майбутнього ромба */
  --diamond-stale: rgba(21, 20, 18, 0.4); /* рамка застарілого ромба */
  --disabled-fill: rgba(21, 20, 18, 0.28); /* «надіслати» без тексту */
  --spinner-track: rgba(21, 20, 18, 0.15);
  --danger-line: rgba(184, 51, 31, 0.35); /* рамка картки помилки */
  --accent-ring: rgba(212, 64, 42, 0.5);
  --accent-ring-0: rgba(212, 64, 42, 0);
  --accent-mark: rgba(212, 64, 42, 0.28); /* підсвітка непідтвердженого твердження */

  /* Медіа (дані клієнта не перефарбовуються — змінюється підкладка й кільце) */
  --media-bg: #151412; /* підкладка кадру .dn-frame, бейдж ✓ на плиті лого */
  --on-media: #f5f3ee; /* гліф на --media-bg */
  --media-ring: rgba(21, 20, 18, 0.12); /* кільце стілів, аркушів, свотчів (= --line-soft) */
  --logo-plate: #fcfbf8; /* плита під лого бренду (= --card) */
  --placeholder-a: #e9e5dc; /* смугастий плейсхолдер медіа */
  --placeholder-b: #f1eee7;

  /* Акаунти (Крок 0) */
  --scrim: rgba(21, 20, 18, 0.32); /* підкладка модалки входу */
  --veil: rgba(245, 243, 238, 0.78); /* резерв для оверлеїв */
  --danger-field: rgba(184, 51, 31, 0.55); /* рамка поля-картки з помилкою */

  /* T1 · Тінь — лише плеєр */
  --shadow-player: 0 30px 60px -30px rgba(21, 20, 18, 0.45), 0 0 0 1px rgba(21, 20, 18, 0.06);

  /* Типографіка · поправка трекінгу дисплейних кеглів (у світлій 0) */
  --trk-display: 0em;

  /* T2 · Шрифти */
  --f-display: "Unbounded", system-ui, sans-serif;
  --f-ui: "Onest", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* T3 · Радіуси */
  --r-4: 4px; /* тайм-код, гліф формату */
  --r-6: 6px; /* стіл */
  --r-10: 10px; /* блок треку */
  --r-12: 12px; /* фото, свотч */
  --r-14: 14px; /* картка, плеєр, тайл формату */
  --r-16: 16px; /* композер, бульбашка */
  --r-20: 20px; /* панель рішень */
  --r-pill: 999px; /* кнопки, чипи */

  /* T3 · Розміри */
  --topbar-h: 56px;
  --chat-col: minmax(300px, 380px);
  --btn-h: 40px; /* кнопка сцени */
  --btn-h-sm: 34px; /* кнопка в чаті */
  --btn-h-lg: 52px; /* кнопка старту */

  /* T4 · Рух */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-hover: 0.2s;
  --t-enter: 0.5s; /* поява екрана сцени */
  --t-msg: 0.38s; /* поява повідомлення */
  --t-playhead: 0.7s;
  --ac-delta: 1.6s; /* мітка зміни балансу «−3 / +10», один раз */
}

/* Темна тема 1a «Графіт». Значення затверджені — еталон docs/design/AdCreative Dark Reference.dc.html. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Поверхні · L oklch: чат 0.201 < сторінка 0.219 < сцена 0.236 < картка 0.262; тон h 75, хрома ≤ 0.009 */
  --paper: #1c1a18;
  --chat: #181613;
  --stage: #201e1b;
  --card: #272421;
  --track-2: #34312e;
  --track-3: #484440;

  /* Текст */
  --ink: #ebe7e2;
  --ink-2: #c4c0bb;
  --muted: #9a9691;

  /* Ролі колишнього --ink */
  --fill-strong: #e1ddd8;
  --on-fill-strong: #1c1a18;
  --edge-strong: #b4b0ac;
  --focus-ring: #ebe7e2;
  --progress: #e1ddd8;

  /* Акцент і стани · тон той самий, світліший для темного тла */
  --accent: #ef5e41;
  --on-accent: #1c1a18;
  --danger: #ed756e;
  --ok: #4ab074;
  --accent-ring: rgba(239, 94, 65, 0.45);
  --accent-ring-0: rgba(239, 94, 65, 0);
  --accent-mark: rgba(239, 94, 65, 0.32);
  --danger-line: rgba(237, 117, 110, 0.4);
  --danger-field: rgba(237, 117, 110, 0.6);

  /* Лінії · альфа від --ink темної теми */
  --line: rgba(235, 231, 226, 0.1);
  --line-strong: rgba(235, 231, 226, 0.16);
  --line-soft: rgba(235, 231, 226, 0.12);
  --line-tile: rgba(235, 231, 226, 0.14);
  --line-dashed: rgba(235, 231, 226, 0.26);
  --tick: rgba(235, 231, 226, 0.22);
  --diamond-idle: rgba(235, 231, 226, 0.45);
  --diamond-stale: rgba(235, 231, 226, 0.38);
  --disabled-fill: rgba(235, 231, 226, 0.2);
  --spinner-track: rgba(235, 231, 226, 0.16);

  /* Медіа · дані не перефарбовуються */
  --media-bg: #0b0a08;
  --on-media: #ebe7e2;
  --media-ring: rgba(235, 231, 226, 0.14);
  --logo-plate: #d4d0cb;
  --placeholder-a: #292724;
  --placeholder-b: #23211e;

  /* Оверлеї і тінь */
  --scrim: rgba(11, 10, 8, 0.62);
  --veil: rgba(28, 26, 24, 0.78);
  --shadow-player: 0 30px 60px -30px rgba(11, 10, 8, 0.72), 0 0 0 1px rgba(235, 231, 226, 0.1);

  /* Типографіка */
  --trk-display: 0.006em;
}