/* ═══════════════════════════════════════════════════════════════════════════
   GOLDJAXE Scribe — слой дизайн-токенов (P0 редизайна, стиль Synology DSM)
   Направление: структура и плотность Synology, единственный акцент — золото
   GOLDJAXE (#C5972A), используется экономно. Холодный нейтральный серый,
   малые радиусы, плоские тени с опорой на 1px-границы, шрифт Inter (самохостинг).

   Единый источник правды. Экраны-приложения (style.css) и админка подключают
   этот файл. Отчёт (report.html) самодостаточен офлайн — держит копию палитры
   у себя. Тёмная тема наследуется из системы автоматически.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('/static/fonts/inter.css');

:root {
  /* ── Шрифты ─────────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ── Нейтральный холодный серый (Cold Gray) ─────────────────────────────── */
  --c-bg:          #EEF0F3;   /* фон приложения */
  --c-surface:     #FFFFFF;   /* карточки, панели */
  --c-surface-2:   #F5F6F8;   /* мягкие вложенные блоки */
  --c-surface-3:   #EBEEF2;   /* hover-подложка, треки */
  --c-line:        #E2E5EA;   /* разделители, границы карточек */
  --c-line-strong: #D2D7DE;   /* акцентные границы, инпуты */

  --c-ink:         #1B1E23;   /* основной текст (холодный near-black) */
  --c-ink-2:       #3E444C;   /* вторичный текст */
  --c-ink-3:       #6A717B;   /* приглушённый */
  --c-ink-4:       #9BA1AB;   /* блёклый, подписи */

  /* ── Золото — единственный сигнатурный акцент ───────────────────────────── */
  --c-gold:        #C5972A;
  --c-gold-strong: #A97F1E;   /* hover / нажатие */
  --c-gold-bg:     #FBF4E4;   /* лёгкая золотая подложка */
  --c-gold-line:   #E7D6A9;   /* золотая граница */

  /* ── Семантика ──────────────────────────────────────────────────────────── */
  --c-info:        #0067E6;   --c-info-bg:    #E8F1FE;   /* синий Synology — только info */
  --c-success:     #1E9E63;   --c-success-bg: #E6F5EC;
  --c-warn:        #B67A12;   --c-warn-bg:    #FCF2DC;   --c-warn-base: #F5A623;
  --c-danger:      #CE4B45;   --c-danger-bg:  #FBECEB;   --c-danger-line: #F0D2CF;

  /* ── Радиусы (малые — плотный «инженерный» язык DSM) ─────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  10px;
  --radius-pill: 999px;

  /* ── Тени (плоские, опора на границы) ───────────────────────────────────── */
  --elev-1: 0 1px 3px rgba(20,28,40,.06), 0 1px 2px rgba(20,28,40,.04);
  --elev-2: 0 2px 10px rgba(20,28,40,.08);
  --elev-3: 0 12px 32px rgba(20,28,40,.12);

  /* ── Кольцо фокуса (золотое — держим единый акцент) ─────────────────────── */
  --focus-ring: 0 0 0 3px rgba(197,151,42,.22);

  /* ── Отступы (8pt-сетка) ────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── Легаси-алиасы: чтобы существующие правила style.css / admin работали ── */
  --bg:        var(--c-bg);
  --surface:   var(--c-surface);
  --separator: var(--c-line);
  --label:     var(--c-ink);
  --label2:    var(--c-ink-2);
  --label3:    var(--c-ink-3);
  --label4:    var(--c-ink-4);
  --accent:    var(--c-gold);
  --accent-bg: var(--c-gold-bg);
  --blue:      var(--c-info);
  --green:     var(--c-success);
  --red:       var(--c-danger);
  --orange:    var(--c-warn-base);
  --shadow:    var(--elev-1);
  --shadow-lg: var(--elev-3);

  /* алиасы словаря админки / отчёта */
  --ink:       var(--c-ink);
  --ink-soft:  var(--c-ink-2);
  --muted:     var(--c-ink-3);
  --faint:     var(--c-ink-4);
  --gold:      var(--c-gold);
  --gold-bg:   var(--c-gold-bg);
  --line:      var(--c-line);
  --card:      var(--c-surface);
  --radius:    var(--radius-lg);
  --team:      var(--c-info);      --team-bg:   var(--c-info-bg);
  --client:    var(--c-warn-base); --client-bg: var(--c-warn-bg);
  --ok:        var(--c-success);   --ok-bg:     var(--c-success-bg);
}

/* ── Тёмная тема (Synology DSM dark) — из системы или по data-theme ────────── */
:root[data-theme="dark"],
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* значения тёмной темы применяются либо явно, либо по системе (см. медиазапрос ниже) */
}

/* значения */
:root[data-theme="dark"] {
  --c-bg:          #15171B;
  --c-surface:     #1E2126;
  --c-surface-2:   #23272D;
  --c-surface-3:   #2A2F36;
  --c-line:        #2F343B;
  --c-line-strong: #3B424B;
  --c-ink:         #E9EBEE;
  --c-ink-2:       #BBC1C9;
  --c-ink-3:       #8A919B;
  --c-ink-4:       #626973;
  --c-gold:        #D6AC4E;
  --c-gold-strong: #E5BD63;
  --c-gold-bg:     rgba(197,151,42,.14);
  --c-gold-line:   rgba(197,151,42,.34);
  --c-info:        #4C9CFF;  --c-info-bg:    rgba(0,103,230,.18);
  --c-success:     #3FBE7E;  --c-success-bg: rgba(31,157,87,.18);
  --c-warn:        #E0A64A;  --c-warn-bg:    rgba(245,166,35,.16);  --c-warn-base: #E0A64A;
  --c-danger:      #EE6A64;  --c-danger-bg:  rgba(206,75,69,.18);   --c-danger-line: rgba(206,75,69,.40);
  --elev-1: 0 1px 3px rgba(0,0,0,.40);
  --elev-2: 0 2px 10px rgba(0,0,0,.45);
  --elev-3: 0 12px 32px rgba(0,0,0,.55);
  --focus-ring: 0 0 0 3px rgba(214,172,78,.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:          #15171B;
    --c-surface:     #1E2126;
    --c-surface-2:   #23272D;
    --c-surface-3:   #2A2F36;
    --c-line:        #2F343B;
    --c-line-strong: #3B424B;
    --c-ink:         #E9EBEE;
    --c-ink-2:       #BBC1C9;
    --c-ink-3:       #8A919B;
    --c-ink-4:       #626973;
    --c-gold:        #D6AC4E;
    --c-gold-strong: #E5BD63;
    --c-gold-bg:     rgba(197,151,42,.14);
    --c-gold-line:   rgba(197,151,42,.34);
    --c-info:        #4C9CFF;  --c-info-bg:    rgba(0,103,230,.18);
    --c-success:     #3FBE7E;  --c-success-bg: rgba(31,157,87,.18);
    --c-warn:        #E0A64A;  --c-warn-bg:    rgba(245,166,35,.16);  --c-warn-base: #E0A64A;
    --c-danger:      #EE6A64;  --c-danger-bg:  rgba(206,75,69,.18);   --c-danger-line: rgba(206,75,69,.40);
    --elev-1: 0 1px 3px rgba(0,0,0,.40);
    --elev-2: 0 2px 10px rgba(0,0,0,.45);
    --elev-3: 0 12px 32px rgba(0,0,0,.55);
    --focus-ring: 0 0 0 3px rgba(214,172,78,.28);
  }
}

/* ── Размеры иконок (набор Lucide) — доступны любому экрану с токенами ──────── */
.ic    { width: 18px; height: 18px; display: inline-block; vertical-align: -0.18em; flex: none; }
.ic-sm { width: 14px; height: 14px; display: inline-block; vertical-align: -0.15em; flex: none; }
.ic-lg { width: 40px; height: 40px; display: block; flex: none; }

/* ── Переключатель темы (кнопка в хедере, общая для всех экранов) ───────────── */
.app-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  color: var(--c-ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.app-theme:hover { background: var(--c-surface-3); color: var(--c-gold); }
.app-theme:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-theme .ic { width: 18px; height: 18px; vertical-align: middle; }
/* Показ нужной иконки по активной теме: тёмная → солнце (клик = светлая),
   светлая → месяц. Когда тема не выбрана явно — падаем на системную. */
[data-theme-toggle] .th-sun,
[data-theme-toggle] .th-moon { display: none; align-items: center; }
:root[data-theme="dark"]  [data-theme-toggle] .th-sun  { display: inline-flex; }
:root[data-theme="light"] [data-theme-toggle] .th-moon { display: inline-flex; }
:root:not([data-theme])   [data-theme-toggle] .th-moon { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) [data-theme-toggle] .th-moon { display: none; }
  :root:not([data-theme]) [data-theme-toggle] .th-sun  { display: inline-flex; }
}

/* ── Мелочи, полезные всем экранам ──────────────────────────────────────────── */
::selection { background: rgba(197,151,42,.22); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
html { -webkit-text-size-adjust: 100%; }