/*
  Дизайн-токены Timesheet9.

  Единственный источник правды по цвету, отступам, типографике и радиусам. Из Timesheet8
  сюда не перенесено ничего: там CSS разложен по нескольким файлам без общей системы, и
  «сделать кнопку как та» означало искать нужный оттенок по коду.

  Правило: в остальных файлах — только var(--ts-*). Литеральный цвет в компоненте
  означает, что здесь не хватает токена, а не что случай особенный.
*/

:root {
    color-scheme: light;

    /* Основной цвет. Глубокий сине-зелёный: продукт учётный, смотрят в него по восемь
       часов, и насыщенный синий на такой дистанции утомляет сильнее. */
    --ts-accent: #0f766e;
    --ts-accent-hover: #0d645d;
    --ts-accent-soft: #ecfdf5;
    --ts-accent-border: #99f6e4;

    /* Поверхности. Рабочая область чуть светлее фона страницы — грид тогда читается как
       лист на столе, без единой рамки вокруг. */
    --ts-bg: #f1f5f9;
    --ts-surface: #ffffff;
    --ts-surface-muted: #f8fafc;
    --ts-surface-hover: #f1f5f9;

    --ts-border: #e2e8f0;
    --ts-border-strong: #cbd5e1;

    /* Текст. Не чистый чёрный: на белом фоне #0f172a даёт тот же контраст, но мягче. */
    --ts-text: #0f172a;
    --ts-text-muted: #64748b;
    --ts-text-faint: #94a3b8;
    --ts-text-inverse: #ffffff;

    /* Состояния строки тайм-шита. Цвет несёт смысл, поэтому он в токенах, а не в вёрстке. */
    --ts-state-draft: #94a3b8;
    --ts-state-invoiced: #2563eb;
    --ts-state-paid: #16a34a;
    --ts-state-nopay: #a855f7;

    --ts-danger: #dc2626;
    --ts-danger-soft: #fef2f2;

    /* Линия графика. Не --ts-accent: тот для линии блёкл (хрома 0,086 — читается серым),
       этот — шаг насыщеннее из того же бирюзового ряда; проверен валидатором палитры
       (яркость, хрома, контраст к белому ≥ 3:1). */
    --ts-chart-line: #0d9488;
    --ts-chart-grid: #eef2f6;
    --ts-warning: #d97706;
    --ts-warning-soft: #fffbeb;
    --ts-success: #16a34a;

    /* Шкала отступов: 4px. Всё кратно ей — иначе плотность экрана разъезжается. */
    --ts-space-1: 4px;
    --ts-space-2: 8px;
    --ts-space-3: 12px;
    --ts-space-4: 16px;
    --ts-space-5: 24px;
    --ts-space-6: 32px;

    --ts-radius-sm: 4px;
    --ts-radius: 6px;
    --ts-radius-lg: 10px;

    --ts-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --ts-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    --ts-shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);

    /* Типографика. Системный стек — ничего не грузим и не ждём отрисовки шрифта. */
    --ts-font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Цифры — моноширинные: часы и суммы в колонке должны выстраиваться разряд под
       разрядом, иначе в столбце «4,0 / 12,5 / 8,0» глазом не поймать порядок величины. */
    --ts-font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

    --ts-text-xs: 11px;
    --ts-text-sm: 12px;
    --ts-text-base: 13px;
    --ts-text-lg: 15px;
    --ts-text-xl: 19px;

    /* Плотность. Продукт для ввода данных: строка 32px даёт ~20 строк на экран ноутбука,
       и это тот случай, когда воздух между строками стоит дороже, чем помогает. */
    --ts-row-height: 32px;
    --ts-control-height: 30px;
}