@layer tokens, base, ui;
@layer tokens {
/* Ритм — дизайн-токены. Роль, не внешний вид. Тёмная тема переопределяет только значения. */

/* Тема для системных частей браузера (ritm#138): полосы прокрутки, поля ввода
   и всё, что рисует не наш CSS. Без этого браузер считает страницу светлой и
   рисует, например, светло-серые полосы по краям тёмного приложения. */
:root,
[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

:root,
[data-theme="light"] {
  /* поверхности и линии */
  --bg-page: #f3f4ee;
  --surface: #fafbf6;
  --surface-raised: #ffffff;
  --surface-sunken: #eaebe3;
  --line: #e1e3d9;
  --line-strong: #cbcec0;
  --line-accent: #bcd6c5;

  /* текст */
  --text: #1b1e1a;
  --text-secondary: #545a50;
  --text-muted: #6c7365;
  --on-accent: #ffffff;

  /* единственный акцент */
  --accent: #2f7d4f;
  --accent-pressed: #245f3d;
  --accent-soft: #e3eee7;

  /* категории — порядок слотов важен */
  --cat-1: #2a78d6; /* работа */
  --cat-2: #eb6834; /* быт */
  --cat-3: #1baf7a; /* хобби */
  --cat-4: #eda100; /* спорт */
  --cat-5: #e87ba4; /* достижения */

  /* статусы — не пересекаются с категориями, всегда со словом */
  --status-good: #0f6b73;
  --status-warn: #8a5a12;
  --status-bad: #a33044;
  --status-info: #4a5a86;
  --status-good-soft: #e0eeef;
  --status-warn-soft: #f3ebdb;
  --status-bad-soft: #f5e4e7;

  /* heatmap: один тон, пять ступеней */
  --heat-0: #e9ebe4;
  --heat-1: #cadfd0;
  --heat-2: #a2c8ae;
  --heat-3: #6ba586;
  --heat-4: #2f7d4f;

  --shadow-1: 0 1px 2px rgba(27, 30, 26, .06);
  --shadow-2: 0 8px 28px rgba(27, 30, 26, .10);
}

[data-theme="dark"] {
  /* Поверхности — нейтральный серый с холодным уклоном (вариант А, выбор
     владельца 06.09): зелёный подмес фона снят, зелёный остаётся акценту. */
  --bg-page: #141517;
  --surface: #1b1d20;
  --surface-raised: #222528;
  --surface-sunken: #0f1113;
  --line: #2c3034;
  --line-strong: #3c4147;
  --line-accent: #3a6b52;

  --text: #e8eaec;
  --text-secondary: #a5aab0;
  --text-muted: #8f949a;
  --on-accent: #0e150f;

  --accent: #4fa76d;
  --accent-pressed: #3d8a58;
  --accent-soft: #1c2a23;

  --cat-1: #3987e5;
  --cat-2: #d95926;
  --cat-3: #199e70;
  --cat-4: #c98500;
  --cat-5: #d55181;

  --status-good: #38a396;
  --status-warn: #c08a2c;
  --status-bad: #d4707f;
  --status-info: #8b9cc8;
  --status-good-soft: #16292a;
  --status-warn-soft: #2a2416;
  --status-bad-soft: #2b1a1d;

  --heat-0: #1f2225;
  --heat-1: #26382a;
  --heat-2: #305239;
  --heat-3: #3c7551;
  --heat-4: #4fa76d;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .55);
}

:root {
  /* типографика */
  --font-display: "Fira Sans", system-ui, sans-serif;
  --font-ui: "Fira Sans", system-ui, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 27px;
  --text-3xl: 40px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.15;
  --leading-normal: 1.45;

  /* размеры */
  /* Рост органов управления. Три осознанных размера, а не пять случайных:
     44 — поля и кнопки (размер пальца), 36 — переключатели и вкладки внутри
     экрана, 32 — мелкие действия в строке. Всё остальное берёт один из них. */
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-xs: 32px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* движение */
  --dur-1: 120ms;
  --dur-2: 260ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}
}