/* Токены дизайна: цвета, отступы, типографика, анимация. Единственный источник значений для всех экранов.
   Тёмная тема — основная (в духе страницы входа). Светлая — по системной теме или вручную:
   <html data-theme="light|dark"> ставит js/theme-init.js из localStorage. */

:root {
  /* поверхности */
  --c-bg: #0b1422;
  --c-bg-glow: rgba(70, 120, 200, .16);
  --c-surface: #111d2e;
  --c-surface-2: #16253a;
  --c-surface-3: #1d2f48;
  --c-glass: rgba(17, 29, 46, .72);
  --c-glass-border: rgba(170, 200, 240, .16);
  --glass-blur: 14px;
  --c-border: #26364d;
  --c-border-strong: #3a5373;
  --c-overlay: rgba(4, 9, 18, .66);

  /* текст: основной, вторичный, третичный */
  --c-text: #e9eff8;
  --c-text-2: #b7c3d6;
  --c-text-3: #93a3ba;

  /* акцент */
  --c-accent: #8ab8ff;
  --c-accent-hover: #a8cbff;
  --c-on-accent: #06101f;
  --c-accent-soft: rgba(138, 184, 255, .14);

  /* семантика: цвет текста/иконки и мягкий фон */
  --c-success: #6fd394;
  --c-success-soft: rgba(111, 211, 148, .14);
  --c-warning: #f2c46b;
  --c-warning-soft: rgba(242, 196, 107, .14);
  --c-danger: #ff8a80;
  --c-danger-soft: rgba(255, 138, 128, .14);
  --c-info: #7cc4ff;
  --c-info-soft: rgba(124, 196, 255, .14);
  --c-banner: #a3271d;
  --c-on-banner: #ffffff;

  /* статусы разделов и сроков */
  --st-draft: #a3aec0;
  --st-review: #f2c46b;
  --st-accepted: #6fd394;
  --st-rework: #ffa36b;
  --st-overdue: #ff7b86;

  /* направления */
  --dir-kr: #c3a6ff;
  --dir-vk: #5ed6e3;
  --dir-ov: #ffb877;
  --dir-eom: #f5dc6a;

  /* отступы 4/8/12/16/24/32 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* радиусы и тени */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, .45);
  --focus-ring: 0 0 0 3px rgba(138, 184, 255, .55);

  /* типографика */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --lh-tight: 1.2;
  --lh-normal: 1.45;
  --lh-loose: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* анимация */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* размеры каркаса */
  --tap: 44px;
  --bottom-h: 60px;
  --side-w: 248px;
  --z-header: 20;
  --z-nav: 30;
  --z-modal: 50;
  --z-toast: 60;

  /* прежние имена — на них написаны стили экранов */
  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --surface-2: var(--c-surface-2);
  --text: var(--c-text);
  --muted: var(--c-text-2);
  --border: var(--c-border);
  --accent: var(--c-accent);
  --accent-text: var(--c-on-accent);
  --accent-soft: var(--c-accent-soft);
  --danger: var(--c-danger);
  --danger-soft: var(--c-danger-soft);
  --success: var(--c-success);
  --warning-soft: var(--c-warning-soft);
  --warning-text: var(--c-warning);
  --banner: var(--c-banner);
  --shadow: var(--shadow-1);
  --radius: var(--r-md);

  color-scheme: dark;
}

/* светлая тема: системная (если не выбрана тёмная вручную) или выбранная вручную */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --c-bg: #f3f5f9;
    --c-bg-glow: rgba(31, 95, 191, .07);
    --c-surface: #ffffff;
    --c-surface-2: #eef1f6;
    --c-surface-3: #e3e8f0;
    --c-glass: rgba(255, 255, 255, .78);
    --c-glass-border: rgba(20, 32, 51, .1);
    --c-border: #d5dce6;
    --c-border-strong: #b3bfd0;
    --c-overlay: rgba(14, 22, 36, .45);
    --c-text: #142033;
    --c-text-2: #43516a;
    --c-text-3: #55627a;
    --c-accent: #1f5fbf;
    --c-accent-hover: #184c99;
    --c-on-accent: #ffffff;
    --c-accent-soft: #e3ecfa;
    --c-success: #176a35;
    --c-success-soft: #e3f4e8;
    --c-warning: #7a5200;
    --c-warning-soft: #fff4d6;
    --c-danger: #b3261e;
    --c-danger-soft: #fbe9e7;
    --c-info: #0b62a0;
    --c-info-soft: #e1f0fb;
    --c-banner: #8a1c14;
    --st-draft: #5c6779;
    --st-review: #8a5d00;
    --st-accepted: #176a35;
    --st-rework: #a8480d;
    --st-overdue: #b3261e;
    --dir-kr: #6b44c2;
    --dir-vk: #086b75;
    --dir-ov: #964a0a;
    --dir-eom: #7d6700;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
    --shadow-2: 0 6px 20px rgba(16, 24, 40, .1);
    --shadow-3: 0 18px 48px rgba(16, 24, 40, .16);
    --focus-ring: 0 0 0 3px rgba(31, 95, 191, .4);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --c-bg: #f3f5f9;
  --c-bg-glow: rgba(31, 95, 191, .07);
  --c-surface: #ffffff;
  --c-surface-2: #eef1f6;
  --c-surface-3: #e3e8f0;
  --c-glass: rgba(255, 255, 255, .78);
  --c-glass-border: rgba(20, 32, 51, .1);
  --c-border: #d5dce6;
  --c-border-strong: #b3bfd0;
  --c-overlay: rgba(14, 22, 36, .45);
  --c-text: #142033;
  --c-text-2: #43516a;
  --c-text-3: #55627a;
  --c-accent: #1f5fbf;
  --c-accent-hover: #184c99;
  --c-on-accent: #ffffff;
  --c-accent-soft: #e3ecfa;
  --c-success: #176a35;
  --c-success-soft: #e3f4e8;
  --c-warning: #7a5200;
  --c-warning-soft: #fff4d6;
  --c-danger: #b3261e;
  --c-danger-soft: #fbe9e7;
  --c-info: #0b62a0;
  --c-info-soft: #e1f0fb;
  --c-banner: #8a1c14;
  --st-draft: #5c6779;
  --st-review: #8a5d00;
  --st-accepted: #176a35;
  --st-rework: #a8480d;
  --st-overdue: #b3261e;
  --dir-kr: #6b44c2;
  --dir-vk: #086b75;
  --dir-ov: #964a0a;
  --dir-eom: #7d6700;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
  --shadow-2: 0 6px 20px rgba(16, 24, 40, .1);
  --shadow-3: 0 18px 48px rgba(16, 24, 40, .16);
  --focus-ring: 0 0 0 3px rgba(31, 95, 191, .4);
  color-scheme: light;
}

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