/* ПВЗ ОС — дизайн-токены. ЕДИНСТВЕННЫЙ источник цвета, шрифта и ритма.
 *
 * НАПРАВЛЕНИЕ. Приложение живёт на айфоне, добавленное на домашний экран, и
 * должно быть неотличимо от системного: это не украшение, а условие доверия —
 * человек открывает его, чтобы за тридцать секунд узнать, сколько у него денег.
 * Поэтому идиома — Apple HIG: сгруппированные врезанные списки, разделители
 * вместо рамок, крупный заголовок, один акцент на всё приложение.
 *
 * ТИПОГРАФИКА — ЭТО ЦИФРЫ. В приложении про деньги характер несёт не заголовок,
 * а колонка сумм. Шрифт системный (на iPhone и Mac это настоящий SF Pro —
 * внешние шрифты запрещены CSP и не нужны), а вся работа сделана в НАСТРОЙКЕ
 * цифр: табличные моноширинные знаки, отрицательные суммы через настоящий минус
 * «−» (U+2212, а не дефис — у дефиса другая ширина и он не встаёт в колонку),
 * знак рубля тише и мельче самих цифр.
 *
 * КОНТРАСТ ПРОВЕРЕН, А НЕ ПОДОБРАН НА ГЛАЗ. Ниже у каждого смыслового цвета
 * стоит его коэффициент к фону. Акцент #0A84FF (выбор юзера) на БЕЛОМ даёт
 * всего 3.65 — для мелкого текста этого мало, поэтому для ссылок и подписей
 * в светлой теме взят затемнённый вариант того же тона (4.86), а сам #0A84FF
 * остаётся там, где он и должен быть: заливки, активный раздел, иконки, вся
 * тёмная тема.
 */

:root {
  color-scheme: light dark;

  /* ── Поверхности (светлая тема) ───────────────────────────────────────
   * Канва серая, карточки белые — как в системных «Настройках». Обратное
   * (белая канва + серые карточки) читается как веб-страница, а не как
   * приложение. */
  --canvas: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f7f7fa;      /* вложенные блоки: шапки таблиц, пустые состояния */
  --surface-3: #ececf1;      /* нажатое состояние строки */
  --overlay: rgba(0, 0, 0, .32);

  /* Разделитель ПОЛУПРОЗРАЧНЫЙ, а не сплошной серый: так он одинаково
   * выглядит и на белой карточке, и на серой канве, и не даёт «грязной»
   * линии на цветной подложке. */
  --hairline: rgba(60, 60, 67, .16);
  --hairline-strong: rgba(60, 60, 67, .29);

  /* ── Текст ──────────────────────────────────────────────────────────── */
  --ink: #1c1c1e;            /* 15.3 : canvas */
  --ink-2: #5b5b60;          /* 6.0  : white — подписи, пояснения */
  --ink-3: #767680;          /* 4.5  : white — даты, служебное */
  --ink-on-accent: #ffffff;

  /* ── Акцент ─────────────────────────────────────────────────────────── */
  --accent: #0a84ff;         /* заливки, активный раздел, иконки */
  --accent-text: #0a6ce8;    /* 4.9 : white — ссылки и мелкий текст */
  --accent-fill: #0a6ce8;    /* 4.9 : white — кнопка с белым текстом */
  --accent-soft: #e8f1ff;    /* подложка выбранного */
  --accent-ring: rgba(10, 132, 255, .35);

  /* ── Смысл денег ────────────────────────────────────────────────────────
   * Цветом ОДНИМ ничего не кодируем: у каждой суммы есть ещё и знак, и
   * подпись. Дальтонизм, печать и чёрно-белый скриншот — три причины, по
   * которым «зелёное значит приход» недостаточно. */
  --income: #1a7f37;         /* 5.1 : white */
  --income-soft: #e7f5ec;
  --expense: #d70015;        /* 5.4 : white */
  --expense-soft: #fdeaec;
  --neutral: #5b5b60;        /* перевод между своими — ни доход, ни расход */
  --neutral-soft: #eeeef1;
  --warn: #b25000;           /* 5.2 : white — требует внимания */
  --warn-soft: #fff2e3;

  /* ── Шрифты ─────────────────────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Roboto Mono", monospace;

  /* Шкала по HIG: 17 — базовый размер текста на телефоне, а не 15/16.
   * Мельче на айфоне читается как «сайт», и по нему промахиваются пальцем. */
  --t-large: 34px;
  --t-title1: 28px;
  --t-title2: 22px;
  --t-title3: 20px;
  --t-headline: 17px;
  --t-body: 17px;
  --t-callout: 16px;
  --t-subhead: 15px;
  --t-footnote: 13px;
  --t-caption: 12px;
  --t-caption2: 11px;

  /* Шкала ДЕНЕГ отдельная: у сумм своя оптика — им нужен вес и отрицательный
   * трекинг, иначе крупное число выглядит рыхлым. */
  --m-hero: 40px;
  --m-lg: 28px;
  --m-md: 20px;
  --m-sm: 17px;

  --lh-tight: 1.15;
  --lh-body: 1.42;

  /* ── Ритм ───────────────────────────────────────────────────────────── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;

  --r-card: 16px;
  --r-row: 10px;
  --r-control: 12px;
  --r-pill: 999px;

  /* Карточки на сгруппированном фоне теней НЕ имеют — их роль играет сама
   * подложка. Тень только у того, что действительно висит НАД экраном. */
  --shadow-float: 0 12px 34px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-bar: 0 -.5px 0 var(--hairline);

  /* ── Каркас ───────────────────────────────────────────────────────────
   * Две РАЗНЫЕ предельные ширины, а не одна общая. Ширина документа правит
   * длину строки текста; ширина таблицы — плотность колонок. Свести их в
   * одну величину значит поломать либо чтение, либо таблицу (урок lotscout:
   * --content-max ≠ --feed-max). */
  --content-max: 760px;
  --wide-max: 1240px;
  --sidebar-w: 264px;

  --tabbar-h: 50px;
  --header-h: 52px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(.32, .72, 0, 1);   /* пружина iOS, а не линейка */
  --dur: .28s;
}

/* ── Тёмная тема ────────────────────────────────────────────────────────
 * Канва ЧЁРНАЯ, карточки — тёмно-серые. На OLED айфона это не эстетика, а
 * расход батареи и настоящая глубина: серая канва под серыми карточками
 * даёт кашу, в которой границы блоков не читаются.
 *
 * Переопределяем ТОЛЬКО токены. Ни одно правило разметки ниже про тему не
 * знает — иначе тёмная тема разъезжается на каждом новом экране. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #000000;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --surface-3: #3a3a3c;
    --overlay: rgba(0, 0, 0, .6);

    --hairline: rgba(84, 84, 88, .48);
    --hairline-strong: rgba(84, 84, 88, .72);

    --ink: #f5f5f7;
    --ink-2: #a1a1a8;
    --ink-3: #8e8e93;

    --accent: #0a84ff;
    --accent-text: #4da2ff;
    --accent-fill: #0a84ff;
    --accent-soft: #10243d;
    --accent-ring: rgba(10, 132, 255, .5);

    --income: #30d158;
    --income-soft: #10301b;
    --expense: #ff453a;
    --expense-soft: #3a1512;
    --neutral: #a1a1a8;
    --neutral-soft: #2c2c2e;
    --warn: #ff9f0a;
    --warn-soft: #38270a;

    --shadow-float: 0 12px 34px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  }
}

/* Ручной выбор темы перебивает системный — в обе стороны. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --overlay: rgba(0, 0, 0, .6);
  --hairline: rgba(84, 84, 88, .48);
  --hairline-strong: rgba(84, 84, 88, .72);
  --ink: #f5f5f7;
  --ink-2: #a1a1a8;
  --ink-3: #8e8e93;
  --accent: #0a84ff;
  --accent-text: #4da2ff;
  --accent-fill: #0a84ff;
  --accent-soft: #10243d;
  --accent-ring: rgba(10, 132, 255, .5);
  --income: #30d158;
  --income-soft: #10301b;
  --expense: #ff453a;
  --expense-soft: #3a1512;
  --neutral: #a1a1a8;
  --neutral-soft: #2c2c2e;
  --warn: #ff9f0a;
  --warn-soft: #38270a;
  --shadow-float: 0 12px 34px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
}

:root[data-theme="light"] { color-scheme: light; }

/* Планшет и десктоп: базовый кегль ниже. 17px на телефоне — размер пальца,
 * на 27-дюймовом мониторе он же выглядит как крупный шрифт для слабовидящих. */
@media (min-width: 900px) {
  :root {
    --t-large: 30px;
    --t-title1: 24px;
    --t-title2: 20px;
    --t-title3: 18px;
    --t-headline: 15px;
    --t-body: 15px;
    --t-callout: 14px;
    --t-subhead: 14px;
    --t-footnote: 13px;
    --m-hero: 38px;
    --m-lg: 26px;
    --m-md: 19px;
    --m-sm: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}