/* Sayso — дизайн-система.

   Значения перенесены из макета v0 (design refenece/app/globals.css)
   один в один: цвета в OKLCH, как в оригинале, а не переведённые в hex.
   Перевод округлил бы каждый цвет до восьми бит ещё до того, как за него
   возьмётся браузер, и разошёлся бы с макетом в третьем знаке. OKLCH
   понимают и браузеры, и печатающий движок — проверено.

   Имена остаются семантическими и прежними: --color-ink, а не --gray-900.
   Тёмная тема появится переопределением тех же имён, без единой правки
   в разметке. */

:root {
  color-scheme: light;

  /* --- Шрифты ---------------------------------------------------------- */
  /* Instrument Sans — весь текст и заголовки. JetBrains Mono — надписи
     капителью и числа: моноширинный набор выравнивает разряды в столбик,
     и таблицы перестают плясать. */
  --font-display: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: var(--font-display);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Цвет ------------------------------------------------------------ */
  /* Тёплая почти-белая основа, один акцент — приглушённый зелёный,
     один сигнальный. Больше двух акцентов на продукт не заводим. */
  --color-surface: oklch(0.9762 0.0068 78);         /* основной фон */
  --color-surface-sunken: oklch(0.945 0.0075 78);   /* карточки, полосы таблиц */
  --color-surface-raised: oklch(0.9762 0.0068 78);  /* всплывающее над фоном */
  --color-surface-inverse: oklch(0.19 0.0068 78);   /* тёмные полосы */
  --color-surface-inverse-2: oklch(0.24 0.0068 78); /* карточки на тёмном */
  --color-line-inverse: oklch(0.9762 0.0068 78 / 0.14);
  --color-ink-inverse-muted: oklch(0.9762 0.0068 78 / 0.62);

  --color-ink: oklch(0.19 0.0068 78);               /* основной текст */
  --color-ink-muted: oklch(0.48 0.008 78);          /* подписи, вторичное */
  --color-ink-faint: oklch(0.48 0.008 78);          /* сноски, единицы */
  --color-ink-inverse: oklch(0.9762 0.0068 78);     /* текст на тёмном */

  /* Прозрачности текста из макета: text-foreground/85, /80, /70, /60 */
  --color-ink-85: oklch(0.19 0.0068 78 / 0.85);
  --color-ink-80: oklch(0.19 0.0068 78 / 0.8);
  --color-ink-70: oklch(0.19 0.0068 78 / 0.7);
  --color-ink-60: oklch(0.19 0.0068 78 / 0.6);

  --color-line: oklch(0.9 0.008 78);                /* границы, разделители */
  --color-line-strong: oklch(0.9 0.008 78);         /* в макете граница одна */

  --color-accent: oklch(0.4 0.052 152);             /* блоки действия, акцент */
  /* Наведение в макете — акцент с прозрачностью 0.9 поверх фона.
     Считаем смешением, а не подобранным вручную вторым цветом. */
  --color-accent-strong: color-mix(in oklab, var(--color-accent) 90%, var(--color-surface));
  --color-accent-wash: oklch(0.945 0.0075 78);      /* фон акцентных областей */
  --color-accent-ink: oklch(0.9762 0.0068 78);      /* текст на акценте */

  --color-signal: oklch(0.55 0.16 25);              /* отсутствие, провал, ноль */
  --color-signal-wash: oklch(0.95 0.02 25);

  /* Второй акцент — «это вы». В палитре макета такого значения нет,
     а в кабинете оно нужно: без него своя строка в таблице ничем
     не отличается от чужой. Взят тон из той же зелёной оси, светлее
     акцента, чтобы читался рядом с ним и не спорил. */
  --color-you: oklch(0.52 0.09 96);
  --color-you-wash: oklch(0.96 0.025 96);

  --color-focus: oklch(0.4 0.052 152);              /* обводка фокуса */

  /* --- Светофор кабинета ------------------------------------------------
     На сайте два цвета и этого достаточно: там читают текст. В кабинете
     смотрят на числа, и человеку нужно понять «хорошо или плохо» раньше,
     чем он прочтёт подпись. Три состояния и к каждому — заливка для
     плашек. Тона взяты с тех же осей, что фирменные: зелёный ярче
     акцента, янтарный между ним и сигнальным. */
  --ok: oklch(0.5 0.13 152);
  --ok-wash: oklch(0.93 0.05 152);
  --ok-line: oklch(0.82 0.08 152);
  --warn: oklch(0.62 0.13 75);
  --warn-wash: oklch(0.95 0.055 85);
  --warn-line: oklch(0.86 0.09 85);
  --bad: oklch(0.55 0.16 25);
  --bad-wash: oklch(0.95 0.03 25);
  --bad-line: oklch(0.88 0.06 25);

  /* Тень карточек кабинета. На сайте теней нет вовсе и не будет:
     там плоскость — часть языка. Здесь она отделяет то, с чем работают,
     от фона, и держится на грани заметности */
  --shadow-card: 0 1px 2px oklch(0.19 0.0068 78 / 0.05),
                 0 2px 8px oklch(0.19 0.0068 78 / 0.04);

  /* Линии графика — из макета, chart-1..5 */
  --chart-1: oklch(0.4 0.052 152);
  --chart-2: oklch(0.6 0.04 152);
  --chart-3: oklch(0.75 0.03 152);
  --chart-4: oklch(0.55 0.008 78);
  --chart-5: oklch(0.3 0.008 78);

  /* --- Отступы --------------------------------------------------------- */
  /* Шкала макета — тейлвиндовская, шаг 0.25rem. Здесь те значения,
     которые в нём действительно встречаются. */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.875rem;  /* 14 — gap-3.5 из макета */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.75rem;   /* 44 — mt-11 */
  --space-8: 4rem;      /* 64 — gap-16 */
  --space-9: 7rem;      /* 112 — mt-28, шаг между разделами */
  --space-10: 10rem;    /* 160 — md:mt-40, он же на широком экране */

  /* --- Типографика ----------------------------------------------------- */
  --text-xs: 0.75rem;      /* 12 — надпись капителью */
  --text-sm: 0.875rem;     /* 14 — подписи, сноски */
  --text-base: 0.95rem;    /* 15.2 — плотный текст списков */
  --text-md: 1.05rem;      /* 16.8 — знак, вводный абзац */
  --text-lg: 1.125rem;     /* 18 — подзаголовок, вводка */
  --text-xl: 1.25rem;      /* 20 — заголовок шага */
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 2.5rem);       /* H2 небольшой */
  --text-3xl: clamp(2.25rem, 1.5rem + 3vw, 3rem);        /* H2 */
  --text-4xl: clamp(2.75rem, 1.6rem + 4.6vw, 4.25rem);   /* H1 внутренних */
  --text-display: clamp(3.1rem, 1.2rem + 7.6vw, 5.5rem); /* первый экран */

  /* Плотный интерлиньяж — отличительная черта макета: заголовок набран
     почти без просвета между строками */
  /* Чуть просторнее единицы: на двух-трёх строках заголовка 0.98
     склеивало их в блок, и строки было тяжело разделить глазом */
  --leading-display: 1.05;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  --tracking-display: -0.03em;  /* крупные заголовки */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.14em;      /* надписи капителью */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  /* Ширина строки: длиннее 68 знаков текст перестаёт читаться */
  --measure: 68ch;
  --measure-narrow: 46ch;

  /* --- Формы ----------------------------------------------------------- */
  /* Радиус в макете один — 1rem, остальные считаются от него */
  --radius: 1rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-full: 999px;

  --border-width: 1px;
  --border: var(--border-width) solid var(--color-line);
  --border-strong: var(--border-width) solid var(--color-line-strong);

  /* Теней в макете нет ни одной: глубина делается цветом и пустотой */
  --shadow-sm: none;
  --shadow-md: none;

  /* --- Сетка ----------------------------------------------------------- */
  /* Ширина листа тянется за экраном: на ноутбуке лист занимает почти всё
     окно, на большом мониторе упирается в предел, чтобы строка не стала
     длиннее читаемого. Жёсткие 1180 оставляли по краям широкого экрана
     слишком много пустого места */
  --page-max: min(1440px, 92vw);
  --page-narrow: 44rem;
  --page-gutter: 1.5rem;

  /* --- Движение -------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
}

/* Тёмная тема сейчас не делается. Когда понадобится, достаточно будет
   переопределить здесь те же имена — разметку и компоненты не трогаем. */

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration: 0ms; }
}

@media (min-width: 48rem) {
  :root { --page-gutter: 2.5rem; }
}