/* Hallmark · tokens · copypost
 *
 * Светлая тема. Брендбук v1.0 описывает тёмную базу, но само приложение светлое,
 * поэтому лендинг идёт за продуктом.
 *
 * Источник правды здесь не мода на лендинги, а дизайн-система самого приложения
 * (copypost-desktop/src/renderer/styles.css). Оттуда взяты три правила, и они же
 * задают весь технический вид страницы:
 *
 *   1. У карточек нет рамок и теней. Разделяем отступами и линиями в 1 px.
 *   2. Главное действие это тёмная заливка со светлым текстом, а не цветная.
 *   3. Цвет в интерфейсе ничего не украшает. Синий остался только кольцом фокуса.
 *
 * Поэтому бумага здесь честно белая (#fff, как холст приложения), радиусы
 * мелкие (8 / 6 / 4 px, как в приложении), а Signal перестал быть заливкой
 * кнопок и вернулся туда, где он что-то значит: знак, текущий раздел, выделение
 * текста. На белом Signal даёт 1.8:1, поэтому текстом он не бывает никогда.
 *
 * Оси темы: paper white (L 100%) · display geometric-sans · accent warm (79°)
 */

:root {
  /* ── Бумага и поверхности ────────────────────────────────────────── */
  --color-paper:      oklch(100% 0 0);           /* страница: просто белая */
  --color-paper-2:    oklch(98.4% 0.0010 265);   /* утопленная полоса */
  --color-surface:    oklch(100% 0 0);           /* плоскость поверх утопленной */
  --color-surface-hi: oklch(96.2% 0.0015 265);   /* тихая заливка: чипы, выключенное */

  /* ── Чернила ─────────────────────────────────────────────────────── */
  --color-ink:        oklch(15.4% 0.0046 264);   /* #0B0C0E  Graphite 900, брендбук */
  --color-ink-2:      oklch(38.0% 0.0110 258);   /* тело текста, 9.6:1 на бумаге */
  --color-muted:      oklch(52.0% 0.0120 258);   /* подписи, 5.4:1 на бумаге */

  /* ── Линии. Их на странице больше, чем рамок: сетка видимая ──────── */
  --color-rule:       oklch(92.1% 0.0023 265);   /* основная линия, как --line в приложении */
  --color-rule-soft:  oklch(95.4% 0.0015 265);   /* линия внутри плотных списков */

  /* ── Главное действие: тёмная заливка, светлый текст ─────────────── */
  --color-solid:      oklch(20.0% 0.0046 264);
  --color-solid-hi:   oklch(28.0% 0.0060 264);   /* под курсором светлеет */
  --color-solid-ink:  oklch(98.7% 0.0009 265);

  /* ── Акцент. Правило 90/9/1: только знак, метка и выделение ──────── */
  --color-accent:     oklch(82.2% 0.1707 79);    /* #FFB500  Signal, брендбук */
  --color-accent-ink: oklch(15.4% 0.0046 264);   /* чернила поверх Signal, 12.4:1 */
  --color-focus:      oklch(48.0% 0.1600 262);   /* кольцо фокуса, 6.4:1 на бумаге */

  /* ── Гарнитуры. 2+1: Jost, Golos Text, JetBrains Mono ───────────── */
  --font-display: 'Jost', system-ui, sans-serif;
  --font-body:    'Golos Text', system-ui, sans-serif;
  --font-outlier: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Шкала кегля. Якорь 17 px (брендбук, Body) ───────────────────── */
  --text-2xs:     0.6875rem;
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1.0625rem;
  --text-md:      1.3125rem;
  --text-lg:      1.625rem;
  --text-xl:      2.375rem;
  --text-2xl:     clamp(2.5rem, 5vw, 3.5rem);
  --text-display: clamp(2.75rem, 7vw, 5rem);

  /* ── Ритм. 4 pt, девять ступеней ─────────────────────────────────── */
  --space-3xs: 0.125rem;  --space-2xs: 0.25rem;  --space-xs:  0.5rem;
  --space-sm:  0.75rem;   --space-md:  1rem;     --space-lg:  1.5rem;
  --space-xl:  2.5rem;    --space-2xl: 4rem;     --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* ── Радиусы и линии. Значения приложения, а не веб-страницы ─────── */
  --radius:    8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --rule-hair: 1px;

  /* ── Движение ────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:   180ms;
  --dur-medium:  320ms;
  /* Смена строки в заголовке. Заметно медленнее всего остального: это не
     отклик на действие, а фон, и торопить его нечем. */
  --dur-rotate:  520ms;

  /* ── Слои ────────────────────────────────────────────────────────── */
  --z-base: 1;  --z-raised: 10;  --z-sticky: 200;
}