/* ==========================================================================
   Scriptify AI — дизайн-токены (КАНОНИЧЕСКИЙ ИСТОЧНИК)
   Отдаётся из Django-статики. design/tokens.css — только @import сюда.
   Источник: PRODUCT.md, DESIGN.md, design/BRIEF.md
   Все цвета в OKLCH. Все контрасты посчитаны, не «на глаз» (см. DESIGN.md).

   Файл ничего не верстает и никуда пока не подключён: подключение к
   Django-статике — задача вёрстки (issue #3+), после того как владелец
   выберет направление в issue #2.

   Архитектура: ОДНА шкала ink-0…ink-12 (бумага → графит) + два бренд-цвета.
   Поверх неё — ТРИ регистра, каждый переопределяет только семантику:
     [data-surface="brand"]    лендинг      — выразительный ярус
     [data-surface="reading"]  блог         — длинное чтение
     [data-surface="product"]  приложение   — плотный ярус, долгая работа
   Ярусы отличаются НЕ палитрой, а тем, какие ступени одной шкалы берут,
   и плотностью (шаг сетки, высота контролов, кегль).
   ========================================================================== */

:root {
  /* ---------- 1. Шкала: бумага → графит --------------------------------
     Тёплый графит (hue 78–92), а не холодный серый Tailwind. Это осознанный
     уход от запрещённого #111827/#6b7280/#e5e7eb. Фон — чистый белый
     (chroma 0), тепло живёт в чернилах и в бренд-цветах, не в подложке:
     тёплый почти-белый фон — это и есть AI-дефолт 2026 года. */
  --ink-0:  oklch(1.000 0.000 0);      /* #ffffff — бумага */
  --ink-1:  oklch(0.977 0.004 92);     /* #f8f7f4 — подложка приложения */
  --ink-2:  oklch(0.948 0.007 92);     /* #efeee9 — утопленные зоны */
  --ink-3:  oklch(0.906 0.010 90);     /* #e2e0d9 — волосяная линия */
  --ink-4:  oklch(0.852 0.012 90);     /* #d1cec6 — разделители, тени листа */
  --ink-5:  oklch(0.778 0.014 88);     /* #bab6ad — disabled */
  --ink-6:  oklch(0.640 0.016 88);     /* #908c81 — граница контрола, 3.36:1 */
  --ink-7:  oklch(0.575 0.018 86);     /* #7e786d — крупный вторичный текст */
  --ink-8:  oklch(0.487 0.019 84);     /* #655f54 — вторичный текст, 6.35:1 */
  --ink-9:  oklch(0.392 0.019 82);     /* #4b453a */
  --ink-10: oklch(0.302 0.017 80);     /* #332d25 — поверхность в тёмной теме */
  --ink-11: oklch(0.222 0.014 78);     /* #1f1a14 — основной текст, 17.2:1 */
  --ink-12: oklch(0.155 0.010 78);     /* #0f0c08 — максимум, заливка секций */

  /* ---------- 2. Бренд: маркер и красная ручка правки -------------------
     Материалы документа, а не «AI-магии». Маркер (amber) — заливка и
     подсветка: текстом на белом он быть НЕ может (1.4:1) и не должен.
     Красная ручка — то, чем правят: акцент, ссылка, фокус, ошибка. */
  --amber:      oklch(0.845 0.168 88);  /* #fac41c — маркер: заливка, метка */
  --amber-deep: oklch(0.640 0.130 78);  /* #b7810f — иконка/крупный текст, 3.43:1 */
  --amber-wash: oklch(0.930 0.090 92);  /* #fde7a2 — подсветка текста */
  --red:        oklch(0.505 0.175 27);  /* #b32926 — акцент/ссылка, 6.43:1 */
  --red-deep:   oklch(0.430 0.155 27);  /* #921b1a — hover, 8.78:1 */
  --red-wash:   oklch(0.940 0.025 28);  /* #fce5e2 — подложка ошибки */

  /* Прозрачности берутся от чернил, а не от чёрного: тень листа на бумаге. */
  --ink-a-08: oklch(0.155 0.010 78 / 0.08);
  --ink-a-14: oklch(0.155 0.010 78 / 0.14);
  --ink-a-22: oklch(0.155 0.010 78 / 0.22);

  /* ---------- 3. Типографика -------------------------------------------
     Archivo (гротеск, сделан под печать и мелкий кегль) + Literata
     (книжная антиква, спроектирована под длинное чтение).
     Пара по оси контраста: гротеск + антиква. Не два похожих гротеска.
     Ни одного шрифта из reflex-reject-списка; Plus Jakarta Sans запрещён.
     Моно — системный: нужен только для тайм-кодов и кода в блоге,
     тащить ради этого веб-шрифт незачем. */
  --font-sans:    "Archivo", system-ui, "Segoe UI", sans-serif;
  --font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --font-serif:   "Literata", Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Шкала кегля, шаг ≥1.25. Дисплей упирается в 4.5rem (потолок 6rem),
     трекинг не туже -0.03em (пол -0.04em). */
  --t-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
  --t-h1:      clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --t-h2:      clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --t-h3:      1.375rem;
  --t-lg:      1.125rem;
  --t-base:    1rem;
  --t-sm:      0.875rem;
  --t-xs:      0.8125rem;

  --lh-tight:  1.08;   /* дисплей */
  --lh-head:   1.2;
  --lh-body:   1.55;
  --lh-read:   1.7;    /* длинное чтение */

  --ls-display: -0.03em;
  --ls-head:    -0.015em;
  --ls-body:    0;
  --ls-caps:    0.06em;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  --measure-read: 68ch;   /* блог */
  --measure-ui:   62ch;   /* текст в приложении */

  /* ---------- 4. Ритм ---------------------------------------------------
     Один 4px-шаг на все ярусы. Плотность задаётся не другой шкалой,
     а тем, какие ступени берёт ярус (см. --gap-* / --pad-* в регистрах). */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --page-max:  72rem;
  --page-gut:  clamp(1rem, 4vw, 2.5rem);

  /* ---------- 5. Форма --------------------------------------------------
     Радиус мелкий: у листа бумаги нет скруглений 14px. Запрещённый
     ghost-card (radius 14 + мягкая широкая тень) не воспроизводим.
     Разделяем не тенью, а линией; тень — только у того, что реально
     висит над страницей (меню, модалка), плюс «стопка листов». */
  --r-1: 3px;    /* контролы, чипы */
  --r-2: 6px;    /* панели, поля ввода */
  --r-3: 10px;   /* крупные блоки, модалка */
  --r-full: 999px;

  --e-0: none;
  --e-1: 0 1px 0 0 var(--ink-a-08);                                 /* край листа */
  --e-2: 0 2px 4px -2px var(--ink-a-14), 0 6px 14px -8px var(--ink-a-14);
  --e-3: 0 8px 20px -6px var(--ink-a-22), 0 24px 48px -24px var(--ink-a-22);
  /* «Стопка листов»: не тень, а второй и третий лист под первым. */
  --e-stack: 6px 6px 0 -1px var(--ink-0), 6px 6px 0 0 var(--ink-4),
             12px 12px 0 -1px var(--ink-0), 12px 12px 0 0 var(--ink-3);

  /* ---------- 6. Движение ----------------------------------------------- */
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);   /* ease-out-quart */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: 120ms;   /* hover, focus */
  --d-2: 180ms;   /* чипы, тултипы */
  --d-3: 280ms;   /* панели, аккордеон */
  --d-4: 420ms;   /* появление секции */

  /* ---------- 7. Слои ---------------------------------------------------- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* ==========================================================================
   Регистр BRAND — лендинг. Дизайн и есть продукт.
   Стратегия цвета: committed. Белая бумага, графитовые чернила, маркер
   держит акценты, красная ручка правит. Секция может быть залита ink-12
   целиком — это разрешено и желательно.
   ========================================================================== */
:root,
[data-surface="brand"] {
  --bg:            var(--ink-0);
  --bg-sunken:     var(--ink-1);
  --surface:       var(--ink-0);
  --surface-raised: var(--ink-0);

  --text:          var(--ink-12);
  --text-body:     var(--ink-11);
  --text-muted:    var(--ink-8);     /* 6.35:1 — не «элегантный» светло-серый */
  --text-on-fill:  var(--ink-0);     /* текст на красной заливке */
  --text-on-amber: var(--ink-12);    /* на маркере — только чернила, 12.1:1 */

  --line:          var(--ink-3);     /* декоративная волосяная */
  --line-strong:   var(--ink-6);     /* граница контрола, 3.36:1 */

  --accent:        var(--red);       /* ссылка, акцент, правка */
  --accent-hover:  var(--red-deep);
  --accent-wash:   var(--red-wash);
  --mark:          var(--amber);     /* маркер: заливка, метка, CTA */
  --mark-wash:     var(--amber-wash);
  --mark-ink:      var(--amber-deep);/* иконка/крупный текст маркерного цвета */
  --focus:         var(--red);       /* 6.43:1 к белому */

  --font-body:     var(--font-sans);
  --font-heading:  var(--font-display);
  --size-body:     var(--t-base);
  --lh:            var(--lh-body);
  --measure:       var(--measure-ui);

  --gap:           var(--sp-5);
  --pad-block:     clamp(2.75rem, 5.5vw, 4.5rem);
  --pad-inline:    var(--page-gut);
  --control-h:     2.75rem;                  /* 44px — палец */
  --radius:        var(--r-2);
}

/* ==========================================================================
   Регистр READING — блог. Час чтения без усталости.
   Та же бумага, но антиква, крупнее кегль, длиннее интерлиньяж, узкая мера.
   ========================================================================== */
[data-surface="reading"] {
  --bg:            var(--ink-0);
  --bg-sunken:     var(--ink-1);
  --surface:       var(--ink-1);
  --surface-raised: var(--ink-0);

  --text:          var(--ink-12);
  --text-body:     var(--ink-11);
  --text-muted:    var(--ink-8);
  --text-on-fill:  var(--ink-0);
  --text-on-amber: var(--ink-12);

  --line:          var(--ink-3);
  --line-strong:   var(--ink-6);

  --accent:        var(--red);
  --accent-hover:  var(--red-deep);
  --accent-wash:   var(--red-wash);
  --mark:          var(--amber);
  --mark-wash:     var(--amber-wash);   /* подсветка цитаты — как маркером */
  --mark-ink:      var(--amber-deep);
  --focus:         var(--red);

  --font-body:     var(--font-serif);   /* книжная антиква */
  --font-heading:  var(--font-display);
  --size-body:     var(--t-lg);         /* 18px */
  --lh:            var(--lh-read);      /* 1.7 */
  --measure:       var(--measure-read); /* 68ch */

  --gap:           var(--sp-5);
  --pad-block:     var(--sp-8);
  --pad-inline:    var(--page-gut);
  --control-h:     2.5rem;
  --radius:        var(--r-2);
}

/* ==========================================================================
   Регистр PRODUCT — веб-приложение (issue #5). Дизайн обслуживает работу.
   Стратегия цвета: restrained — акцент ≤10% площади. Та же шкала, но:
   подложка на ступень темнее бумаги, лист — белый и лежит на ней; шаг сетки
   мельче, контролы ниже, кегль меньше. Секции никто не заливает ink-12:
   человек сидит здесь смену, а не десять секунд.
   ========================================================================== */
[data-surface="product"] {
  --bg:            var(--ink-1);     /* подложка стола */
  --bg-sunken:     var(--ink-2);     /* колодцы, полосы таблиц */
  --surface:       var(--ink-0);     /* лист документа */
  --surface-raised: var(--ink-0);

  --text:          var(--ink-12);
  --text-body:     var(--ink-11);    /* 16.1:1 на --bg */
  --text-muted:    var(--ink-8);     /* 5.94:1 на --bg */
  --text-on-fill:  var(--ink-0);
  --text-on-amber: var(--ink-12);

  --line:          var(--ink-3);
  --line-strong:   var(--ink-6);     /* 3.15:1 на --bg */

  --accent:        var(--red);
  --accent-hover:  var(--red-deep);
  --accent-wash:   var(--red-wash);
  --mark:          var(--amber);     /* только статус «в работе» и выделение */
  --mark-wash:     var(--amber-wash);
  --mark-ink:      var(--amber-deep);
  --focus:         var(--red);

  --font-body:     var(--font-sans);
  --font-heading:  var(--font-sans); /* в приложении дисплей не нужен */
  --size-body:     var(--t-sm);      /* 14px — плотность */
  --lh:            var(--lh-body);
  --measure:       var(--measure-ui);

  --gap:           var(--sp-3);      /* 12px вместо 24px */
  --pad-block:     var(--sp-5);
  --pad-inline:    var(--sp-5);
  --control-h:     2.25rem;          /* 36px — мышь, не палец */
  --radius:        var(--r-1);
}

/* --------------------------------------------------------------------------
   Статусы задачи — Task.status. Материалов ровно три, новых цветов нет:
   чернила, маркер, красная ручка. «Готово» — не зелёный: зелёный тут ничего
   не значит, а лишний цвет размывает систему.
   Цвет никогда не единственный носитель смысла: рядом всегда текст.
   Красный на brand-ярусе — акцент, на product-ярусе — ошибка. На одной
   поверхности он не может значить и то, и другое.
   -------------------------------------------------------------------------- */
:root {
  --st-queued-bg:     var(--ink-2);
  --st-queued-text:   var(--ink-8);
  --st-processing-bg: var(--amber-wash);
  --st-processing-text: var(--ink-12);   /* 14.1:1 */
  --st-done-bg:       var(--ink-12);
  --st-done-text:     var(--ink-0);      /* 19.6:1 */
  --st-failed-bg:     var(--red);
  --st-failed-text:   var(--ink-0);      /* 6.43:1 */
}

/* ==========================================================================
   Тёмная тема — та же шкала, прочитанная с другого конца.
   Бумага становится графитом, чернила — бумагой. Маркер и красная ручка
   не меняются: они и есть бренд.
   ========================================================================== */
[data-theme="dark"] {
  --bg:            var(--ink-11);
  --bg-sunken:     var(--ink-12);
  --surface:       var(--ink-10);
  --surface-raised: var(--ink-9);

  --text:          var(--ink-0);
  --text-body:     var(--ink-2);     /* 14.8:1 на --bg */
  --text-muted:    var(--ink-5);     /* 8.56:1 на --bg */
  --text-on-fill:  var(--ink-0);
  --text-on-amber: var(--ink-12);    /* маркер остаётся светлым */

  --line:          var(--ink-10);
  --line-strong:   var(--ink-7);

  --accent:        var(--amber);     /* красный на графите слепнет — акцентом */
  --accent-hover:  var(--amber-wash);/* становится маркер */
  --accent-wash:   var(--ink-10);
  --focus:         var(--amber);

  --st-queued-bg:     var(--ink-10);
  --st-queued-text:   var(--ink-5);
  --st-processing-bg: var(--amber);
  --st-processing-text: var(--ink-12);
  --st-done-bg:       var(--ink-2);
  --st-done-text:     var(--ink-12);
  --st-failed-bg:     var(--red);
  --st-failed-text:   var(--ink-0);

  --ink-a-08: oklch(1 0 0 / 0.08);
  --ink-a-14: oklch(1 0 0 / 0.14);
  --ink-a-22: oklch(1 0 0 / 0.22);
  --e-stack: 6px 6px 0 -1px var(--ink-11), 6px 6px 0 0 var(--ink-9),
             12px 12px 0 -1px var(--ink-11), 12px 12px 0 0 var(--ink-10);
}

/* --------------------------------------------------------------------------
   Reduced motion — не опция. Каждая анимация обязана иметь эту ветку.
   Контент не прячется до срабатывания reveal: анимация улучшает уже видимое.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-1: 1ms;
    --d-2: 1ms;
    --d-3: 1ms;
    --d-4: 1ms;
    --ease-out: linear;
    --ease-in-out: linear;
  }
}