/* «Очаг» — токены дизайн-системы и базовые стили. Источник правды по значениям:
   таблицы в docs/design/tokens.md обязаны совпадать с этим файлом.
   Основа — «бумага» форума (modern.css) без изменений: --paper, --ink, --accent, тёмная тема.
   Добавлены: поверхности листка и записки, оттенки разделов, цвета людей, состояния, размеры, движение.
   Светлая тема по умолчанию; тёмная — по системе (prefers-color-scheme) или принудительно
   data-theme="dark" на <html>; data-theme="light" отключает системную тёмную (как в форуме).
   Контраст посчитан по WCAG 2 на --paper / --paper-2 (светлая) и на #1b1916 / #23201c (тёмная):
   текст ≥ 4,5:1, точки и корешки ≥ 3:1. Пересчёт — scripts в отчёте задачи docs/tasks/. */

@layer tokens, base;

/* Manrope: переменный вес 200–800 (используем только 400–800), кириллица и латиница отдельно. */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/manrope-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@layer tokens {
  :root {
    color-scheme: light;

    /* ---- Поверхности ---- */
    --paper: #f9f6f0;        /* бумага: фон страницы, тулбара, листа; oklch(0.97 0.009 85) */
    --paper-2: #f1ebe1;      /* листок: карточка на доске и на полках «Сегодня» — «бумага на бумаге» */
    --control: #efe8dd;      /* поля ввода, чипы, колонки доски */
    --hover: #f3eee5;        /* наведение на строку и тихую кнопку */

    /* ---- Текст ---- */
    --ink: #2b2724;          /* основной текст; 13,7:1 */
    --ink-2: #706760;        /* мета, подписи, сделанное; 5,1:1 на бумаге, 4,7:1 на листке */
    --ink-3: #978c80;        /* плейсхолдер, недоступное, кольцо пустой галочки; 3,05:1 — не для текста со смыслом */

    /* ---- Линии ---- */
    --line: #ebe4d9;         /* разделители строк и секций */
    --line-strong: #dcd2c3;  /* подчёркивание ссылок, граббер шита, цитата */

    /* ---- Акцент: единственный цвет действий ---- */
    --accent: #b4532a;       /* терракота: основная кнопка, галочка, фокус, выбранное, Входящие; 4,6:1 */
    --accent-soft: #f5e6dc;  /* подложка нажатого и выбранного */
    --on-accent: #f9f6f0;    /* текст на акценте; 4,6:1 */

    /* ---- Состояния (редко: ошибка, удаление, подтверждение) ---- */
    --ok: #337344;           /* oklch(0.50 0.10 150) 5,3:1 */
    --warn: #945f0e;         /* oklch(0.53 0.11 70)  5,0:1 */
    --danger: #a83634;       /* oklch(0.50 0.15 25)  6,0:1 */

    /* ---- Записка партнёру — единственный «стикер» ---- */
    --note: #fbeccb;         /* = --hl форума; текст --ink 12,7:1 */

    /* ---- Оттенки разделов: только корешок, точка и мелкая метка, никогда заливка блока ---- */
    --hue-shop: #586c33;     /* олива — Покупки;      oklch(0.50 0.085 125) 5,4:1 */
    --hue-home: #82583b;     /* глина — Дом;          oklch(0.50 0.07 55)   5,7:1 */
    --hue-kitchen: #8e6201;  /* шафран — Кухня;       oklch(0.53 0.11 78)   5,0:1 */
    --hue-cinema: #7d507f;   /* слива — Кино;         oklch(0.50 0.09 325)  5,9:1 */
    --hue-calendar: #287963; /* малахит — Календарь;  oklch(0.52 0.085 172) 4,9:1 */
    --hue-private: #69625d;  /* графит — Личное;      oklch(0.50 0.012 60)  5,6:1 */
    --hue-inbox: var(--accent); /* терракота — Входящие и действия */

    /* ---- Цвета людей: шесть тёплых кружков, выбор при первом входе; точки ≥ 3,5:1 ---- */
    --person-1: #bc5f6d;     /* брусника  oklch(0.60 0.12 12)  3,9:1 */
    --person-2: #a57710;     /* мёд       oklch(0.60 0.12 80)  3,7:1 */
    --person-3: #668e4f;     /* шалфей    oklch(0.60 0.10 135) 3,5:1 */
    --person-4: #2b9191;     /* морская   oklch(0.60 0.09 195) 3,5:1 */
    --person-5: #5b84ae;     /* сизый     oklch(0.60 0.08 250) 3,6:1 */
    --person-6: #9b6ca5;     /* вереск    oklch(0.60 0.10 320) 3,8:1 */
    --me: var(--person-4);   /* приложение задаёт инлайн-стилем на <html> из профиля */
    --you: var(--person-1);

    /* ---- Тень: только «поднятое» состояние — перетаскиваемый листок, шит, тост ---- */
    --shadow-lift: 0 8px 24px rgba(43, 39, 36, 0.14);

    /* ---- Шрифт ---- */
    --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-body: 16.5px;       /* текст: списки, тело карточки; на компьютере 17 px */
    --lh-list: 1.5;          /* интерлиньяж списков и форм */
    --lh-prose: 1.65;        /* интерлиньяж тела карточки */
    --fs-small: 14.5px;      /* тихие кнопки, комментарии */
    --fs-meta: 13.5px;       /* мета под заголовком, подписи полей, чипы; вес 500 */
    --lh-meta: 1.4;
    --fs-stamp: 12px;        /* штамп даты: капитель 700 с разрядкой */
    --ls-stamp: 0.08em;
    --fs-group: 13.5px;      /* заголовок группы (отдел магазина, «Куплено»); вес 600, --ink-2 */
    --fs-block: 18px;        /* заголовок блока на «Сегодня»; вес 700 */
    --fs-card: 22px;         /* заголовок открытой карточки; вес 700; на компьютере 26 px */
    --fs-title: 24px;        /* заголовок экрана; вес 800; на компьютере 28 px */
    --fs-display: 30px;      /* дата словами на «Сегодня»; вес 800; на компьютере 36 px */
    --ls-tight: -0.025em;    /* трекинг крупных заголовков */

    /* ---- Отступы: шаг 4 px ---- */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* ---- Радиусы ---- */
    --r-slip: 10px;          /* листок, записка, поле ввода, тост */
    --r-field: 10px;
    --r-pill: 999px;         /* кнопки и чипы */
    --r-sheet: 16px;         /* шит, диалог, колонка доски */

    /* ---- Размеры ---- */
    --tap: 44px;             /* минимальная цель касания */
    --row-shop: 52px;        /* строка списка покупок */
    --bar-h: 56px;           /* тулбар сверху (компьютер) и снизу (телефон) */
    --dot: 8px;              /* точка человека */
    --spine: 3px;            /* корешок раздела */
    --check: 22px;           /* круг галочки */
    --gutter: 16px;          /* боковое поле страницы; на компьютере 24 px */
    --page: 880px;           /* колонка списков и экранов */
    --col: 68ch;             /* ширина прозы в открытой карточке */
    --sheet-w: 36rem;        /* шит и диалог на компьютере */
    --safe-b: env(safe-area-inset-bottom, 0px);

    /* ---- Движение: три длительности, всё ≤ 160 мс ---- */
    --t-fast: 80ms;          /* смена цвета при наведении и нажатии */
    --t-base: 120ms;         /* фокус, чип, кольцо галочки */
    --t-slow: 160ms;         /* штрих галочки и зачёркивание, появление шита */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    --z-bar: 10; --z-sheet: 20; --z-toast: 30;
  }

  @media (min-width: 700px) {
    :root { --fs-body: 17px; --fs-card: 26px; --fs-title: 28px; --fs-display: 36px; --gutter: 24px; }
  }

  /* Тёмная тема: та же тёплая бумага, светлее на шаг оттенки разделов и людей, тень глубже. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #1b1916; --paper-2: #23201c; --control: #2a2621; --hover: #23201c;
      --ink: #ebe4d8; --ink-2: #a99e90; --ink-3: #847a6e;
      --line: #2c2823; --line-strong: #423c34;
      --accent: #e98a5c; --accent-soft: #3a261b; --on-accent: #1b1916;
      --ok: #88ca95; --warn: #e7b369; --danger: #f98e8b;
      --note: #3a301b;
      --hue-shop: #aac282; --hue-home: #dbac8d; --hue-kitchen: #e3b667; --hue-cinema: #d2a6d4;
      --hue-calendar: #7cc9b1; --hue-private: #b7afaa;
      --person-1: #f3909d; --person-2: #d5b455; --person-3: #96c07f;
      --person-4: #64c3c3; --person-5: #8ab5e3; --person-6: #ce9cd9;
      --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #1b1916; --paper-2: #23201c; --control: #2a2621; --hover: #23201c;
    --ink: #ebe4d8; --ink-2: #a99e90; --ink-3: #847a6e;
    --line: #2c2823; --line-strong: #423c34;
    --accent: #e98a5c; --accent-soft: #3a261b; --on-accent: #1b1916;
    --ok: #88ca95; --warn: #e7b369; --danger: #f98e8b;
    --note: #3a301b;
    --hue-shop: #aac282; --hue-home: #dbac8d; --hue-kitchen: #e3b667; --hue-cinema: #d2a6d4;
    --hue-calendar: #7cc9b1; --hue-private: #b7afaa;
    --person-1: #f3909d; --person-2: #d5b455; --person-3: #96c07f;
    --person-4: #64c3c3; --person-5: #8ab5e3; --person-6: #ce9cd9;
    --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0; min-height: 100dvh;
    background: var(--paper); color: var(--ink);
    font: 400 var(--fs-body) / var(--lh-list) var(--font);
    font-variant-ligatures: common-ligatures;
    overflow-wrap: break-word;
  }
  h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
  p { margin: 0; }
  a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong);
    text-underline-offset: 0.14em; transition: color var(--t-fast), text-decoration-color var(--t-fast); }
  a:hover { color: var(--accent); text-decoration-color: currentColor; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  img, svg { max-width: 100%; }
  hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
  ::selection { background: var(--accent-soft); }
  ::placeholder { color: var(--ink-3); opacity: 1; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

  /* Цифры одной ширины: цены, время, счётчики, даты. */
  .num { font-variant-numeric: tabular-nums; }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Движение выключается целиком: смена цвета и зачёркивание становятся мгновенными. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
  }
}