/* ═══════════════════════════════════════════════════════════════════════
   NUMEFY TOKENS · единый источник значений
   ═══════════════════════════════════════════════════════════════════════

   ЧТО ЭТО. Один файл, из которого берут значения все страницы сайта.
   Собран из того, что УЖЕ используется в проде — ничего не выдумано.

   ЗАЧЕМ. Чтобы дизайнер (когда появится) заполнил значения здесь,
   и весь сайт поменялся разом. Сегодня это уже проверено: перекраска
   29-листового отчёта заняла одну накладку, потому что он обращается
   к переменным 644 раза. Страницы с инлайновыми стилями так не лечатся.

   АРХИТЕКТУРА — ядро и поверхности:

     ЯДРО        шкалы и нейтрали. Общее для всего сайта. Не переопределяется.
       ↓
     ПОВЕРХНОСТЬ отчёт · прогноз · статья · лендинг.
                 У каждой свой характер, но все наследуют ядро.
       ↓
     ТЕМА        внутри поверхности: матрица (фиолет) / пара (малина).

   Единый стиль ≠ одинаковый вид. Общее — бренд, ритм, читаемость.
   Разное — характер поверхности.

   ПРАВИЛА, БЕЗ КОТОРЫХ ЭТО НЕ РАБОТАЕТ:
     1. Ни одного <style> во вьюхе и ни одного style="..." в разметке.
     2. Цвет, кегль, отступ, радиус, тень — только через var(--nf-*).
        Хардкод #7c3aed внутри страницы запрещён.
     3. Новый калькулятор берёт существующие компоненты. Нужен новый —
        добавляется в общий слой, а не в файл страницы.
     4. Листы A4 не расставляются руками (иначе смена кегля ломает всё).

   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 1. ЯДРО · ШКАЛЫ ══════════════════════════════════════════════════
   Значения взяты по частоте из прода. Дизайнер меняет числа —
   структура остаётся. */
:root {

  /* ── Кегль ────────────────────────────────────────────────────────
     Сейчас в проде 307 разных размеров. Здесь 9 ступеней.
     ⚠ Минимум для основного текста — 15px (проверено по контрасту
     и читаемости; ниже начинается «мелковато»). */
  --nf-text-2xs:  11px;   /* только служебное: колонтитул, сноска */
  --nf-text-xs:   12px;   /* надзаголовки, подписи */
  --nf-text-sm:   14px;   /* вторичный текст, карточки */
  --nf-text-base: 16px;   /* основной текст */
  --nf-text-lg:   19px;   /* лид */
  --nf-text-xl:   24px;   /* подзаголовок */
  --nf-text-2xl:  32px;   /* заголовок раздела */
  --nf-text-3xl:  44px;   /* заголовок главы */
  --nf-text-4xl:  72px;   /* обложка */

  --nf-leading-tight: 1.15;
  --nf-leading-snug:  1.4;
  --nf-leading-base:  1.62;
  --nf-leading-loose: 1.75;

  --nf-tracking-tight: -.02em;
  --nf-tracking-base:  0;
  --nf-tracking-wide:  .16em;   /* надзаголовки в разрядку */

  /* ── Отступы ──────────────────────────────────────────────────────
     Сейчас 734 разных значения gap/padding. Здесь 8 ступеней. */
  --nf-space-1: 4px;
  --nf-space-2: 8px;
  --nf-space-3: 12px;
  --nf-space-4: 16px;
  --nf-space-5: 24px;
  --nf-space-6: 32px;
  --nf-space-7: 48px;
  --nf-space-8: 64px;

  /* ── Радиусы ──────────────────────────────────────────────────────
     Сейчас 14 разных значений в одном документе — отсюда ощущение,
     что одни блоки закруглённые, другие заквадраченные. Здесь три
     плюс две особые формы. */
  --nf-radius-sm:   8px;    /* ячейки, плитки, мелкие карточки */
  --nf-radius:     14px;    /* карточки, врезки, блоки */
  --nf-radius-lg:  20px;    /* крупные контейнеры */
  --nf-radius-pill: 999px;  /* пилюли, лейблы */
  --nf-radius-full: 50%;    /* круги: арканы, точки */

  /* ── Тени ─────────────────────────────────────────────────────────
     Сейчас 497 вариантов, почти все чёрные. Здесь четыре, все
     тонированные: чёрная тень на цветной бумаге выглядит грязно. */
  --nf-shadow-xs: 0 1px 2px rgba(60,40,50,.05);
  --nf-shadow-sm: 0 1px 3px rgba(60,40,50,.06), 0 3px 10px rgba(60,40,50,.05);
  --nf-shadow-md: 0 2px 6px rgba(60,40,50,.06), 0 12px 30px rgba(60,40,50,.08);
  --nf-shadow-lg: 0 4px 14px rgba(60,40,50,.08), 0 22px 50px rgba(60,40,50,.11);

  /* ── Ширины ───────────────────────────────────────────────────────*/
  --nf-width-sheet:  210mm;   /* лист A4 — формат всего сайта */
  --nf-width-read:   680px;   /* читальная колонка длинного текста */
  --nf-width-page:  1190px;   /* контейнер лендинга */

  --nf-transition: .18s cubic-bezier(.4,0,.2,1);
}


/* ═══ 2. ЯДРО · НЕЙТРАЛИ ═══════════════════════════════════════════════
   Тёплые, со сливовым подтоном. Холодный slate из Tailwind
   (#0f172a…#94a3b8) читается как дефолтный шаблон — от него ушли.

   ⚠ Каждый уровень проверен на контраст по бумаге. Границу трогать
   нельзя: --nf-ink-5 это ровно 4.6:1, ниже текст перестаёт читаться. */
:root {
  --nf-paper:   #ffffff;
  --nf-bg:      #fffdfc;   /* тёплая бумага без желтизны */
  --nf-surface: #f7f3f5;

  --nf-ink-1: #241d28;   /* 14.9:1 — заголовки */
  --nf-ink-2: #3d3340;   /*  9.6:1 — основной текст */
  --nf-ink-3: #55495a;   /*  7.1:1 — вторичный */
  --nf-ink-4: #665c6a;   /*  5.6:1 — приглушённый */
  --nf-ink-5: #7d717f;   /*  4.6:1 — предел, дальше нельзя */

  --nf-line:   #ece5e8;
  --nf-line-2: #f7f3f5;
}


/* ═══ 3. ЯДРО · БРЕНД И СЕМАНТИКА ══════════════════════════════════════
   Фиолет — константа бренда: 456 употреблений в проде и образ Нумии.
   Остальные акценты углублены: кислотные не читаются и выглядят дёшево.

   ⚠ Правило: цветом можно НАБИРАТЬ ТЕКСТ только если он проходит 4.5:1
   по бумаге. Светлые версии (-light) — исключительно декор и заливки. */
:root {
  --nf-brand:       #7c3aed;
  --nf-brand-light: #9d6bf5;
  --nf-brand-soft:  #f0e9fe;
  --nf-brand-bg:    #faf6ff;

  --nf-gold:        #8f6714;   /* 5.6:1 — им набираются надзаголовки */
  --nf-gold-light:  #d4a94a;   /* декор: рамки, линейки, заливки */
  --nf-gold-soft:   #f8f0dc;

  --nf-success:      #0f7a5a;
  --nf-success-soft: #e2f2ec;
  --nf-danger:       #b3341f;   /* терракота — теплее алого */
  --nf-danger-soft:  #fbeae6;
  --nf-info:         #1e5aa8;
  --nf-info-soft:    #e6eef8;
  --nf-accent:       #b5327a;   /* было #ec4899 — кислотный */
  --nf-indigo:       #4f46e5;
  --nf-teal:         #0d7490;
}


/* ═══ 4. ЯДРО · ШРИФТЫ ═════════════════════════════════════════════════
   Максимум два семейства. Сейчас в отчёте четыре — это и есть
   «слишком красиво». Значения подставит дизайнер, роли останутся. */
:root {
  --nf-font-display: 'Lora', Georgia, serif;          /* заголовки */
  --nf-font-body:    'Onest', system-ui, sans-serif;  /* весь текст */
  --nf-font-num:     var(--nf-font-display);          /* цифры арканов */
}


/* ═══════════════════════════════════════════════════════════════════════
   5. ПОВЕРХНОСТИ
   Наследуют ядро, переопределяют только характер.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 5.1 ОТЧЁТ A4 ──────────────────────────────────────────────────────
   Матрица и совместимость. Структура имён у них уже одинаковая,
   различаются только акценты — значит это одна поверхность с двумя
   темами, а не два разных дизайна. */
[data-nf-surface="report"] {
  --nf-sheet-w:       var(--nf-width-sheet);
  --nf-sheet-h:       297mm;
  --nf-sheet-pad:     16mm 18mm 18mm;
  --nf-sheet-radius:  8px;
  --nf-sheet-shadow:  var(--nf-shadow-lg);
  --nf-sheet-bg:      var(--nf-paper);

  --nf-report-accent:      var(--nf-brand);
  --nf-report-accent-soft: var(--nf-brand-soft);
  --nf-report-accent-bg:   var(--nf-brand-bg);
}

/* Тема: личная матрица — фиолет (как в проде) */
[data-nf-theme="matrix"] {
  --nf-report-accent:      #7c3aed;
  --nf-report-accent-soft: #f0e9fe;
  --nf-report-accent-bg:   #faf6ff;
}

/* Тема: совместимость — малина (как в проде, --purple: #e11d48) */
[data-nf-theme="pair"] {
  --nf-report-accent:      #c11a45;
  --nf-report-accent-soft: #ffe4e9;
  --nf-report-accent-bg:   #fff5f7;
}

/* ── 5.2 ПРОГНОЗ ───────────────────────────────────────────────────────
   Отдельный характер: кремовая бумага, слива, золото. Это осознанно
   другая поверхность — «книга», а не «документ». Значения из прода. */
[data-nf-surface="prognoz"] {
  --nf-bg:      #faf6ef;
  --nf-paper:   #fffdf9;
  --nf-surface: #f4ecdf;

  --nf-ink-1: #2a2130;
  --nf-ink-2: #453a4b;   /* поднято с #514357 под контраст */
  --nf-ink-3: #6b5d6d;   /* поднято с #8a7d8c — не проходило 4.5:1 */

  --nf-plum:   #33163f;
  --nf-plum-2: #4c2168;
  --nf-plum-3: #6b3a8f;

  --nf-line: #e7dcc9;
  --nf-font-display: 'Lora', Georgia, serif;
}

/* ── 5.3 СТАТЬЯ ────────────────────────────────────────────────────────
   Сейчас переменных нет вообще — всё захардкожено. Заводим базу:
   узкая читальная колонка, крупный кегль, максимум воздуха. */
[data-nf-surface="article"] {
  --nf-article-width:   var(--nf-width-read);
  --nf-article-size:    18px;    /* длинный текст читают с экрана */
  --nf-article-leading: var(--nf-leading-loose);
  --nf-article-accent:  var(--nf-brand);
}

/* ── 5.4 ЛЕНДИНГ ───────────────────────────────────────────────────────
   Сейчас дублирует палитру отчёта под префиксом l3-. Сводим к общему:
   отдельная система здесь не нужна, нужен свой ритм. */
[data-nf-surface="site"] {
  --nf-site-width:   var(--nf-width-page);
  --nf-site-section: var(--nf-space-8);
  --nf-site-accent:  var(--nf-brand);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. МОСТ К СТАРОМУ КОДУ — СНЯТ 2026-08-06
   ───────────────────────────────────────────────────────────────────────
   Здесь были псевдонимы --purple/--gold/--ink-1 → --nf-*.

   Почему сняты: `stylesheet_link_tag :app` в layout подтягивает ВСЕ файлы
   из app/assets/stylesheets, поэтому этот файл грузится глобально. Его
   :root шёл после hv.css и перехватывал --gold: страницы прогноза
   получали #8f6714 вместо своего #a8842b.

   Решение Романа 06.08: источник истины — hv (живой стиль прода).
   Именами --gold/--cream/--plum/--serif теперь владеет hv.css, слой
   совместимости там же. Шкалы ниже (--nf-text-*, --nf-space-*) остаются:
   их у hv нет, и они ничего не перехватывают.
   ═══════════════════════════════════════════════════════════════════════ */