/*
 * Семантичний шар: поверхні, текст, лінії.
 *
 * Правило одне й воно з картки: Telegram диктує ТЛО й безпечні зони, бренд
 * не перефарбовує. Тому тут немає жодного нового кольору — усе або токен
 * хендофа, або замішування токена з чорним/білим через color-mix. Сирих hex
 * у цьому файлі бути не може за визначенням (це перевіряє тест).
 *
 * Темна тема — не інверсія палітри, а друга пара поверхонь. Ember і Tide на
 * ній ті самі: борг лишається Ember, кредит — Settled, інакше людина, яка
 * ввечері відкрила бота в темній темі, побачила б інші гроші, ніж удень.
 */

:root {
  color-scheme: light;

  /* Поверхні */
  --sp-canvas: var(--color-canvas);
  --sp-surface: var(--color-surface);
  --sp-surface-sunken: var(--color-neutral100);
  --sp-line: var(--color-line);

  /* Текст */
  --sp-text: var(--color-ink);
  --sp-text-muted: var(--color-slate);
  --sp-text-faint: var(--color-neutral400);
  --sp-on-brand: var(--color-surface);

  /*
   * Бренд ТЕКСТОМ — окремо від бренду ЗАЛИВКОЮ. Заливка кнопки лишається
   * tide600 в обох темах (біла підпис на ній читається скрізь), а от tide600
   * буквами на темній поверхні дає близько 2:1 — тому там світліший стоп
   * тієї ж рампи. Це не інша палітра, це інший стоп однієї.
   */
  --sp-brand-text: var(--color-tide600);
  --sp-brand-fill: var(--color-tide600);
  --sp-brand-soft: var(--color-tide100);
  --sp-brand-border: var(--color-tide200);

  --sp-accent-text: var(--color-ember500);
  --sp-accent-soft: var(--color-ember100);
  --sp-accent-border: var(--color-ember200);

  /* Гроші. Кольору не міняють ніколи — ані від теми, ані від категорії. */
  --sp-debt: var(--color-youOwe);
  --sp-credit: var(--color-settled);

  /* Тло сторінки поза каркасом застосунку віддане Telegram. */
  --sp-page: var(--tg-theme-bg-color, var(--sp-canvas));

  /* Безпечні зони Telegram: шапка згори, системна смуга знизу. */
  --sp-safe-top: var(--tg-safe-area-inset-top, 0px);
  --sp-safe-bottom: max(var(--tg-safe-area-inset-bottom, 0px), var(--space-safeBottom));
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --sp-canvas: color-mix(in srgb, var(--color-ink) 74%, black);
  --sp-surface: color-mix(in srgb, var(--color-ink) 92%, white);
  --sp-surface-sunken: color-mix(in srgb, var(--color-ink) 84%, black);
  --sp-line: color-mix(in srgb, var(--color-ink) 70%, white);

  --sp-text: var(--color-surface);
  --sp-text-muted: var(--color-tide200);
  --sp-text-faint: var(--color-neutral400);

  --sp-brand-text: var(--color-tide400);
  --sp-brand-soft: color-mix(in srgb, var(--color-tide600) 26%, transparent);
  --sp-brand-border: color-mix(in srgb, var(--color-tide400) 46%, transparent);

  --sp-accent-text: var(--color-ember400);
  --sp-accent-soft: color-mix(in srgb, var(--color-ember500) 24%, transparent);
  --sp-accent-border: color-mix(in srgb, var(--color-ember400) 46%, transparent);

  --sp-debt: var(--color-ember400);
  --sp-credit: color-mix(in srgb, var(--color-settled) 72%, white);
}

/*
 * Поза Telegram (вітрина у звичайному браузері) тему бере системна
 * налаштованість — але лише поки скрипт не проставив свою: у Telegram
 * джерело правди одне, і це colorScheme міні-застосунку.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --sp-canvas: color-mix(in srgb, var(--color-ink) 74%, black);
    --sp-surface: color-mix(in srgb, var(--color-ink) 92%, white);
    --sp-surface-sunken: color-mix(in srgb, var(--color-ink) 84%, black);
    --sp-line: color-mix(in srgb, var(--color-ink) 70%, white);

    --sp-text: var(--color-surface);
    --sp-text-muted: var(--color-tide200);
    --sp-brand-text: var(--color-tide400);
    --sp-brand-soft: color-mix(in srgb, var(--color-tide600) 26%, transparent);
    --sp-brand-border: color-mix(in srgb, var(--color-tide400) 46%, transparent);
    --sp-accent-text: var(--color-ember400);
    --sp-accent-soft: color-mix(in srgb, var(--color-ember500) 24%, transparent);
    --sp-accent-border: color-mix(in srgb, var(--color-ember400) 46%, transparent);
    --sp-debt: var(--color-ember400);
    --sp-credit: color-mix(in srgb, var(--color-settled) 72%, white);
  }
}