/* Дизайн-токены: единственное место, где задаются цвета, шрифты, отступы и радиусы.
   Компоненты используют только эти переменные, поэтому тема и фирменный цвет
   тенанта меняются в одном месте. */

:root {
  /* Шрифты: Onest для текста интерфейса, Unbounded для времени, цен и кода записи. */
  --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Unbounded', 'Onest', system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;

  /* Цвета: "чернила" и "бумага" ежедневника, зеленый значит "свободно", красный только для кода. */
  --color-ink: #1e2235;
  --color-ink-soft: #5a6078;
  --color-paper: #f5f6fa;
  --color-surface: #ffffff;
  --color-line: #e1e4ec;
  --color-free: #0b7558; /* контраст от 4.98:1 на всех светлых фонах (WCAG AA, проверено axe) */
  --color-free-soft: #e3f4ee;
  --color-on-free: #ffffff;
  --color-busy: #a7acbc;
  --color-busy-soft: #eef0f4;
  --color-selected: #1e2235;
  --color-on-selected: #ffffff;
  --color-code: #c01a31; /* контраст 5.22:1 на розовом фоне кода */
  --color-code-soft: #fde8eb;
  --color-warning: #9a5b00;
  --color-warning-soft: #fff1d6;
  --color-focus: #3b6cf6;

  /* Фирменный цвет тенанта. Подставляется на его страницах вместо зеленого. */
  --color-brand: var(--color-free);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-control: 0.75rem;
  --radius-sheet: 1.5rem;
  --radius-round: 999px;

  --tap-size: 2.75rem; /* 44 px: минимальная зона нажатия пальцем */
  --page-narrow: 30rem; /* ширина сценария записи на ноутбуке */
  --shadow-sheet: 0 -0.5rem 1.5rem rgb(30 34 53 / 0.14);

  /* Связь с Bootstrap: его компоненты берут наши цвета и шрифт. */
  --bs-body-font-family: var(--font-ui);
  --bs-body-color: var(--color-ink);
  --bs-body-bg: var(--color-paper);
  --bs-border-color: var(--color-line);
  --bs-link-color: var(--color-ink);
  --bs-link-hover-color: var(--color-free);
}

[data-theme='dark'] {
  --color-ink: #e9ebf3;
  --color-ink-soft: #a3a8bd;
  --color-paper: #12141f;
  --color-surface: #1b1e2c;
  --color-line: #2c3044;
  --color-free: #3cc79e;
  --color-free-soft: #173a31;
  --color-on-free: #0b1f19;
  --color-busy: #5a6078;
  --color-busy-soft: #22263a;
  --color-selected: #e9ebf3;
  --color-on-selected: #12141f;
  --color-code: #ff4d62;
  --color-code-soft: #3a1820;
  --color-warning: #f2b14a;
  --color-warning-soft: #3a2c12;
  --color-focus: #7c9cff;
  --shadow-sheet: 0 -0.5rem 1.5rem rgb(0 0 0 / 0.5);

  --bs-body-color: var(--color-ink);
  --bs-body-bg: var(--color-paper);
  --bs-border-color: var(--color-line);
  --bs-link-color: var(--color-ink);
}