/*
 * Токены дизайн-системы «Окна МКД» — ОДИН файл на оба интерфейса:
 * Django-страницы (templates/base.html) и React-доску задач
 * (frontend/public/index.html подключает его тем же /static/css/tokens.css).
 *
 * Палитра — из логотипа и макетов владельца (холст «Окна МКД — макеты
 * интерфейса», 2026-10-23): ночной синий (верхнее меню, текст), тёплый свет
 * окон — янтарь (только главные действия), красный — просрочка. Стиль
 * плоский: белые листы на серо-голубой подложке, тонкие рамки, без пухлых
 * теней; тень появляется только при наведении.
 *
 * Тема: html[data-theme="light"|"dark"] ставит скрипт в <head> до отрисовки
 * (выбор в localStorage 'theme', иначе — системная). Имена --ink-* и
 * --accent-* оставлены прежними, чтобы старые стили страниц перекрасились
 * сами; в тёмной теме шкала ink «переворачивается»: --ink-900 — всегда
 * основной текст, --ink-50 — всегда самая тихая заливка.
 */

:root {
  color-scheme: light;

  /* Бренд — не зависят от темы */
  --navy-950: #070C1A;
  --navy-900: #0E1733;
  --navy-800: #18244B;
  --navy-700: #2D3A66;
  --brand-300: #FFD98A;
  --brand-400: #FFBF4D;
  --brand-500: #F5A623;
  --brand-600: #D98C0B;
  --brand-glow: rgba(245, 166, 35, .35);
  --on-brand: #0E1733;

  /* Верхнее меню — ночной синий в обеих темах */
  --nav-bg: #0E1733;
  --nav-fg: #FFFFFF;
  --nav-muted: #AEB7CE;
  --nav-hover: rgba(255, 255, 255, .08);
  --nav-active: rgba(255, 255, 255, .12);
  --nav-line: rgba(255, 255, 255, .12);

  /* Нейтрали */
  --ink-900: #0E1733;
  --ink-800: #1F2A45;
  --ink-700: #384260;
  --ink-500: #5F6982;
  --ink-400: #8590A7;
  --ink-300: #A8B1C3;
  --ink-200: #CDD3E0;
  --ink-100: #E1E5EE;
  --ink-50:  #F1F4F9;

  --bg: #F2F4F8;
  --surface: #FFFFFF;
  --surface-2: #F7F8FB;
  --surface-raised: #FFFFFF;
  --border: #E1E5EE;
  --border-strong: #CDD3E0;
  --overlay: rgba(7, 12, 26, .5);

  /* Ссылки, фокус, выбранное */
  --accent-700: #1F45C2;
  --accent-600: #2D5BE3;
  --accent-400: #6A8BEE;
  --accent-300: #A6BAF5;
  --accent-100: #E9EEFD;
  --accent-50:  #F3F6FE;
  --on-accent: #FFFFFF;

  /* Статусы: текст статуса — 600/700, фон — 100 */
  --success-700: #146B43;
  --success-600: #17804F;
  --success-100: #E2F3E9;
  --warning-700: #8A5A00;
  --warning-600: #B87406;
  --warning-100: #FFF4DB;
  --danger-700:  #AE2537;
  --danger-600:  #D23245;
  --danger-100:  #FDE9EB;
  --info-600:    #2D5BE3;
  --info-100:    #E9EEFD;
  --on-solid: #FFFFFF;

  /* Дом-иллюстрация (сводка, вкладки домов) */
  --bldg: #18244B;
  --win-off: #2D3A66;

  /* Типографика */
  --font-display: 'Montserrat', 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Форма */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 1px 2px rgba(14, 23, 51, .06), 0 10px 28px -14px rgba(14, 23, 51, .22);
  --shadow-lg: 0 24px 60px -12px rgba(14, 23, 51, .3), 0 0 0 1px rgba(14, 23, 51, .06);
  --ring: 0 0 0 3px rgba(45, 91, 227, .22);
  --card-border: 1px solid var(--border);

  /* Движение */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .12s;
  --dur-2: .2s;
  --dur-3: .32s;
}

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

  --nav-bg: #060B17;
  --nav-hover: rgba(255, 255, 255, .06);
  --nav-active: rgba(255, 255, 255, .1);
  --nav-line: rgba(255, 255, 255, .08);

  --ink-900: #EDF1F9;
  --ink-800: #D6DCEA;
  --ink-700: #C3CADB;
  --ink-500: #8F99B1;
  --ink-400: #6F7A95;
  --ink-300: #545F7C;
  --ink-200: #3A4663;
  --ink-100: #27334F;
  --ink-50:  #152038;

  --bg: #0A1020;
  --surface: #111A31;
  --surface-2: #0D152A;
  --surface-raised: #16213D;
  --border: #1F2A44;
  --border-strong: #2C3858;
  --overlay: rgba(2, 5, 14, .66);

  --accent-700: #B4C5FF;
  --accent-600: #8EA8FF;
  --accent-400: #6582E6;
  --accent-300: #3E5BB5;
  --accent-100: rgba(142, 168, 255, .14);
  --accent-50:  rgba(142, 168, 255, .08);
  --on-accent: #0A1020;

  --brand-500: #FFB53D;
  --brand-400: #FFC766;
  --brand-600: #E89B1A;
  --on-brand: #0A1020;

  --success-700: #7BE3AE;
  --success-600: #3FD48C;
  --success-100: rgba(63, 212, 140, .12);
  --warning-700: #FFC766;
  --warning-600: #FFB53D;
  --warning-100: rgba(255, 181, 61, .13);
  --danger-700:  #FF9AAB;
  --danger-600:  #FF6B7B;
  --danger-100:  rgba(255, 107, 123, .13);
  --info-600:    #8EA8FF;
  --info-100:    rgba(142, 168, 255, .13);
  --on-solid: #0A1020;

  --bldg: #0F1838;
  --win-off: #1F2A52;

  --shadow-md: 0 0 0 1px rgba(255, 255, 255, .04), 0 14px 32px -16px rgba(0, 0, 0, .75);
  --shadow-lg: 0 28px 70px -10px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07);
  --ring: 0 0 0 3px rgba(142, 168, 255, .3);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}