/* ============================================================
   КАР-точки · Дизайн-система «МОДЕРНИЗМ-80»
   tokens.css — единственный источник правды по стилю.
   Подключать ПЕРВЫМ, до style.css.

   Правило: в style.css не должно остаться ни одного
   зашитого значения цвета, отступа, радиуса или длительности.
   Только var(--...).
   ============================================================ */

:root {
  /* ---------- 01 · ЦВЕТ · светлая тема (по умолчанию) ------- */

  /* Основа — оштукатуренная стена и бумага */
  --c-paper:      #F2EBDD;   /* фон экрана */
  --c-paper-2:    #EAE1CF;   /* приподнятая плоскость: карточка, панель */
  --c-paper-3:    #DFD3BC;   /* утопленная: трек прогресса, поле ввода */
  --c-edge:       #CDBFA4;   /* волосяная линейка, границы */

  /* Краска */
  --c-ink:        #221E19;   /* основной текст            13.96:1 */
  --c-ink-2:      #5A5147;   /* вторичный текст            6.55:1 */
  --c-ink-3:      #6E6559;   /* подписи, приглушённое      4.83:1 */

  /* Серое перо — вторая краска знака. Единственный токен с одним
     значением в обеих темах: к светлой бумаге 3.81:1, к тёмному
     фону 4.12:1, к чернилам 3.68:1 — выше порога 3:1 для
     нетекстовой графики (WCAG 1.4.11) везде.
     НЕ цвет текста: к бумаге 3.81 < 4.5. */
  --c-ash:        #7C7669;

  /* Акценты — сняты с референсов (тик, петроль, бордо, охра, мох) */
  --c-petrol:     #1F5A66;   /* основной акцент, действие */
  --c-petrol-alt: #2E7A88;   /* hover / светлее */
  --c-brick:      #A63A2E;   /* ошибка, «Снова», удаление */
  --c-brick-alt:  #C24A3B;
  --c-ochre:      #D99A2B;   /* внимание, «Трудно», серия дней */
  --c-ochre-alt:  #EDB44A;
  --c-moss:       #4F6B36;   /* успех, «Легко», выучено */
  --c-moss-alt:   #67873F;
  --c-teak:       #8A5A32;   /* дерево: папки, нейтральный акцент */

  /* Текст поверх заливки акцентом.
     Светлая тема: светлая подпись везде, КРОМЕ охры. */
  --c-on-petrol:  #FDFAF3;   /* 7.43:1 */
  --c-on-brick:   #FDFAF3;   /* 6.17:1 */
  --c-on-moss:    #FDFAF3;   /* 5.77:1 */
  --c-on-teak:    #FDFAF3;   /* 5.61:1 */
  --c-on-ochre:   #221E19;   /* 6.79:1 — светлая подпись даёт 2.34, нельзя */

  /* Семантические синонимы — в компонентах пользуйтесь ими */
  --c-accent:     var(--c-petrol);
  --c-on-accent:  var(--c-on-petrol);
  --c-success:    var(--c-moss);
  --c-warning:    var(--c-ochre);
  --c-danger:     var(--c-brick);

  /* Оценки SM-2 / Лейтнер — цвет как функциональный код */
  --c-grade-again: var(--c-brick);
  --c-grade-hard:  var(--c-ochre);
  --c-grade-good:  var(--c-petrol);
  --c-grade-easy:  var(--c-moss);

  /* Тень — офсетная печать: сдвиг без размытия */
  --shadow-ink:   34 30 25;

  /* ---------- 02 · ТИПОГРАФИКА ------------------------------ */
  --font-display: 'Unbounded', 'Golos Text', ui-sans-serif, system-ui, sans-serif;
  --font-text:    'Golos Text', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Шкала 1.25, привязана к 16px. clamp — для телефона. */
  --fs-micro:  12px;
  --fs-small:  14px;
  --fs-body:   16px;
  --fs-lead:   20px;
  --fs-h3:     clamp(18px, 2.2vw, 20px);
  --fs-h2:     clamp(22px, 3.2vw, 26px);
  --fs-h1:     clamp(26px, 4.6vw, 34px);
  --fs-hero:   clamp(32px, 7vw, 52px);

  /* Golos Text отдаёт 400/500/600; Unbounded — 700/800.
     --fw-bold = 600 (потолок текста). Дисплейный «чёрный» — --fw-black. */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;
  --fw-black:   800;

  --lh-tight:  1.12;   /* дисплейные заголовки */
  --lh-snug:   1.32;   /* подзаголовки */
  --lh-body:   1.55;   /* основной текст */
  --lh-loose:  1.7;    /* длинные заметки */

  /* Разрядка. Капслок в этой системе ВСЕГДА с разрядкой. */
  --ls-hero:   0.02em;
  --ls-display: 0.06em;
  --ls-label:  0.14em;   /* мелкие капс-лейблы */
  --ls-body:   0em;

  /* ---------- 03 · СЕТКА И ОТСТУПЫ -------------------------- */
  /* Базовый модуль 4px. Промежуточных значений не бывает. */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  --gutter:      var(--sp-5);
  --page-max:    1120px;
  --measure:     68ch;   /* предельная длина строки в заметке */

  /* ---------- 04 · ГЕОМЕТРИЯ -------------------------------- */
  /* Модернизм = почти прямой угол. Скругления скупые. */
  --r-0:     0px;
  --r-1:     3px;    /* кнопки, поля, чипы */
  --r-2:     6px;    /* карточки, панели */
  --r-3:    10px;    /* крупные модальные */
  --r-pill: 100px;   /* только «кресло-раковина»: аватар, счётчик серии */

  --bw-hair:  1px;   /* волосяная линейка */
  --bw-bold:  2px;   /* акцентная рамка, фокус */
  --bw-slab:  4px;   /* цветной корешок слева у карточки */

  /* ---------- 05 · ТЕНИ ------------------------------------- */
  /* Никакого blur. Только сдвиг — как второй прогон краски. */
  --sh-flat:  0 0 0 var(--bw-hair) var(--c-edge);
  --sh-1:     2px 2px 0 rgb(var(--shadow-ink) / 0.14);
  --sh-2:     4px 4px 0 rgb(var(--shadow-ink) / 0.16);
  --sh-3:     7px 7px 0 rgb(var(--shadow-ink) / 0.18);
  --sh-press: 1px 1px 0 rgb(var(--shadow-ink) / 0.20);
  --sh-focus: 0 0 0 var(--bw-bold) var(--c-paper), 0 0 0 5px var(--c-petrol);

  /* ---------- 06 · ДВИЖЕНИЕ --------------------------------- */
  /* Механика, а не желе. Отскока в системе нет. */
  --t-instant: 90ms;
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   340ms;
  --t-flip:   440ms;

  --e-out:    cubic-bezier(0.22, 0.68, 0.28, 1);    /* появление */
  --e-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19); /* уход */
  --e-inout:  cubic-bezier(0.62, 0.02, 0.30, 1);    /* переворот карточки */
  --e-linear: linear;                                /* счётчики, прогресс */

  /* ---------- 07 · СЛОИ ------------------------------------- */
  --z-base:      0;
  --z-sticky:   10;
  --z-nav:      20;
  --z-overlay:  30;
  --z-dialog:   40;
  --z-toast:    50;

  /* ---------- 08 · ФАКТУРА ---------------------------------- */
  /* Лёгкое офсетное зерно поверх фона. Одна строка, без картинок. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  --grain-opacity: 0.05;

  /* ---------- 09 · КАЛЕНДАРЬ -------------------------------- */
  /* Три ступени насыщенности. Проценты подмеса зависят от темы:
     в тёмной подпись светлая, поэтому заливка обязана быть глуше,
     иначе цифра на ячейке проваливается ниже 4.5:1. */
  --cal-l1: 26%;   /* светлая: 8.21:1 с --c-ink-2 */
  --cal-l2: 55%;   /* светлая: 5.56:1 с --c-ink   */
}

/* ============================================================
   ТЁМНАЯ ТЕМА · «вечерний режим»
   Правило меняется: подпись на ЛЮБОЙ заливке акцентом — тёмная.
   ============================================================ */
/* «Холодная графитовая ночь» — вариант B. Тот же материал (оштукатуренная
   стена), что и в светлой теме, но при вечернем/люминесцентном освещении:
   нейтрально-графитовый, без коричневого подмеса светлой темы. Шаг между
   --c-paper/-2/-3 нарочно шире математически равного шага в светлой теме —
   при низкой яркости глаз хуже различает близкие тона, а близкие к чёрному
   цвета чаще страдают от блика и разброса чёрной точки монитора. */
:root[data-theme='dark'] {
  --c-paper:      #121316;
  --c-paper-2:    #1F2025;
  --c-paper-3:    #26282E;
  --c-edge:       #363942;

  --c-ink:        #F0E7D6;   /* 15.13:1 */
  --c-ink-2:      #C4B8A2;   /*  9.49:1 */
  --c-ink-3:      #9A8F7C;   /*  5.83:1 */

  --c-petrol:     #57B8CB;
  --c-petrol-alt: #7FC6D2;
  --c-brick:      #E37F6C;
  --c-brick-alt:  #EE9484;
  --c-ochre:      #E9B24E;
  --c-ochre-alt:  #F5C86F;
  --c-moss:       #9BC06E;
  --c-moss-alt:   #B2CE83;
  --c-teak:       #C9955F;

  --c-on-petrol:  #121316;   /* 8.07:1 */
  --c-on-brick:   #121316;   /* 6.65:1 */
  --c-on-moss:    #121316;   /* 8.99:1 */
  --c-on-teak:    #121316;   /* 7.03:1 */
  --c-on-ochre:   #121316;   /* 9.68:1 */

  --shadow-ink:   0 0 0;
  --sh-1:     2px 2px 0 rgb(0 0 0 / 0.45);
  --sh-2:     4px 4px 0 rgb(0 0 0 / 0.50);
  --sh-3:     7px 7px 0 rgb(0 0 0 / 0.55);
  --sh-press: 1px 1px 0 rgb(0 0 0 / 0.55);
  --grain-opacity: 0.035;

  --cal-l1: 18%;   /* тёмная: 5.96:1 с --c-ink-2 */
  --cal-l2: 34%;   /* тёмная: 6.68:1 с --c-ink   */
}

/* Следовать системе, если пользователь не выбрал тему руками */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  }
}

/* ============================================================
   ДОСТУПНОСТЬ · уважать «уменьшить движение»
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-instant: 1ms; --t-fast: 1ms; --t-base: 1ms;
    --t-slow: 1ms;    --t-flip: 1ms;
  }
}

/* ============================================================
   ЗАПРЕТЫ (проверяемые правила, а не пожелания)

   1. Охра (--c-ochre) НИКОГДА не используется как цвет текста
      на бумаге: контраст 2.06:1. Только как заливка с тёмной
      подписью или как плашка.
   2. box-shadow с ненулевым blur-radius в системе запрещён.
      Тень — это сдвиг краски, а не свет.
   3. Градиенты запрещены везде, кроме фотографий на карточках.
   4. Капслок без --ls-label запрещён.
   5. Отступ, не кратный 4px, запрещён.
   6. Скругление больше --r-3 запрещено везде, кроме --r-pill
      на аватаре и счётчике серии.
   7. Знак: две краски (--c-ink + --c-ash) допустимы только на
      бумаге и на чёрной плашке. На цветной подложке и в штампе
      знак ОДНОЦВЕТНЫЙ: серое к петроли даёт 1.72:1 — грязь.
   8. --c-ash никогда не используется как цвет текста.
   ============================================================ */