/* Токены дизайн-системы mehotel. Все значения только здесь; в остальных файлах — var(--…). */

:root {
  /* отступы, шаг 4 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* типографика */
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-s: 13px;
  --fs-m: 14px;
  --fs-l: 16px;
  --fs-xl: 20px;
  --lh: 1.45;

  /* формы */
  --r1: 6px;
  --r2: 10px;
  --r3: 999px;
  --ctl-h: 36px;
  --tap: 44px;

  /* светлая тема */
  --bg: #f2f4f7;
  --card: #fff;
  --sub: #f7f8fa;
  --text: #172033;
  --text2: #5d6779;
  --line: #e2e6ec;
  --line2: #cfd5de;
  --accent: #2f5fd6;
  --accent-bg: #eaf0ff;
  --accent-fg: #fff;
  --ok: #157040;
  --ok-bg: #e4f4ea;
  --warn: #a8510b;
  --warn-bg: #fcf0e1;
  --err: #c02626;
  --err-bg: #fdeceb;
  --nav: #14213d;
  --nav-text: #c9d2e6;
  --nav-text-hover: #fff;
  --nav-active: #2a3a5e;
  --badge: #c02626;
  --logo: #2f5fd6;
  --focus-nav: #79a2ff;

  /* «возраст» даты */
  --age-today: #1a5fd0;
  --age-today-bg: #e3f0ff;
  --age-yday: #6a3fc8;
  --age-yday-bg: #efe7ff;
  --age-week: #0f766e;
  --age-week-bg: #e2f5f3;

  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --shadow: 0 1px 2px rgb(23 32 51 / 0.06);
  --shadow-pop: 0 8px 24px rgb(23 32 51 / 0.14);
  --scrim: rgb(15 18 23 / 0.55);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1217;
    --card: #171b22;
    --sub: color-mix(in srgb, var(--text) 5%, var(--card));
    --text: #e6e9ee;
    --text2: #98a2b3;
    --line: #262c36;
    --line2: color-mix(in srgb, var(--text) 22%, var(--card));
    --accent: #79a2ff;
    --accent-bg: #1b2842;
    --accent-fg: #0f1217;
    --ok: #5cc98c;
    --ok-bg: color-mix(in srgb, var(--ok) 16%, var(--card));
    --warn: #f0a44b;
    --warn-bg: color-mix(in srgb, var(--warn) 16%, var(--card));
    --err: #f37b7b;
    --err-bg: color-mix(in srgb, var(--err) 16%, var(--card));
    --nav: #14213d;
    --badge: #c02626;

    --age-today: color-mix(in srgb, #1a5fd0 45%, #fff);
    --age-today-bg: color-mix(in srgb, #1a5fd0 20%, var(--card));
    --age-yday: color-mix(in srgb, #6a3fc8 45%, #fff);
    --age-yday-bg: color-mix(in srgb, #6a3fc8 22%, var(--card));
    --age-week: color-mix(in srgb, #0f766e 40%, #fff);
    --age-week-bg: color-mix(in srgb, #0f766e 22%, var(--card));

    --shadow: none;
    --shadow-pop: none;
    --scrim: rgb(0 0 0 / 0.65);
    color-scheme: dark;
  }
}

/* Переменные Django: forms.css, changelists.css и widgets.css читают их, а не наши токены. */
:root {
  --primary: var(--accent);
  --secondary: var(--accent);
  --primary-fg: var(--accent-fg);
  --body-fg: var(--text);
  --body-bg: var(--card);
  --body-quiet-color: var(--text2);
  --body-medium-color: var(--text);
  --body-loud-color: var(--text);
  --link-fg: var(--accent);
  --link-hover-color: var(--accent);
  --link-selected-fg: var(--accent);
  --hairline-color: var(--line);
  --border-color: var(--line2);
  --error-fg: var(--err);
  --darkened-bg: var(--sub);
  --selected-bg: var(--accent-bg);
  --selected-row: var(--accent-bg);
  --button-fg: var(--accent-fg);
  --button-bg: var(--accent);
  --button-hover-bg: var(--accent);
  --default-button-bg: var(--accent);
  --default-button-hover-bg: var(--accent);
  --close-button-bg: var(--sub);
  --close-button-hover-bg: var(--line);
  --delete-button-bg: var(--err);
  --delete-button-hover-bg: var(--err);
  --object-tools-fg: var(--accent-fg);
  --object-tools-bg: var(--accent);
  --object-tools-hover-bg: var(--accent);
  --font-family-primary: var(--font);
  --font-family-monospace: ui-monospace, Menlo, Consolas, monospace;
}