/* #1 */

/* #2 */

/* #3 */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2?v=2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Medium.woff2?v=2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-SemiBold.woff2?v=2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Bold.woff2?v=2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Regular.woff2?v=2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Medium.woff2?v=2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Bold.woff2?v=2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    /* #4 */
    /* Browser-native UI (file pickers, date/time pickers, scrollbars,
       autofill) follows this; without it, Chromium paints those widgets
       on a white surface inside our dark shell. */
    color-scheme: dark;
    --primary: #e8650a;          /* #5 */
    --primary-dim: #c75508;      /* #6 */
    --secondary: #ff5a1f;        /* #7 — hi-vis hazard orange (was red #b82020); construction theme = orange, not red */
    --accent: #e8650a;           /* #8 */
    --success: #4a7c59;          /* #9 */
    --bg-base: #111111;          /* #10 */
    --bg-surface: #1a1a1a;       /* #11 */
    --bg-elevated: #222222;      /* #12 */
    --text-primary: #e8e4de;     /* #13 */
    --text-secondary: #8a8580;   /* #14 */
    --text-muted: #5c5752;       /* #15 */
    --border: #2e2c28;           /* #16 */
    --focus-ring: rgba(232, 101, 10, 0.3);
    --logo-invert: 0;            /* #17 */
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --radius: 0;
    /* #18 */
    --unit: 0.5rem;
    --space-xs: var(--unit);               /* #19 */
    --space-sm: calc(var(--unit) * 1.5);   /* #20 */
    --space-md: calc(var(--unit) * 2);     /* #21 */
    --space-lg: calc(var(--unit) * 3);     /* #22 */
    --space-xl: calc(var(--unit) * 4);     /* #23 */
    --space-2xl: calc(var(--unit) * 6);    /* #24 */
    /* #25 */
    --micro-size: 0.625rem;  /* #26 */
    --micro-color: var(--text-muted);
    /* #27 */
    --fs-heading-lg: clamp(1rem, 2.5vw, 1.375rem);
    /* #28 */
    /* ── Линии ────────────────────────────────────────────────────────
       Сплошная линия = ГРАНИЦА объекта: где кончается панель, карточка,
       поле. Точечная = РИТМ внутри перечня: строки журнала, пункты плана,
       критерии разбора. Разное назначение — разный рисунок, поэтому список
       не выглядит набором из двадцати карточек.
       Пунктир взят чертёжный: точка 1px с шагом 6px (`--rule-dots`) для
       строк, штрих 6/4 (`--rule-dash`) для крупных членений разметки. */
    --rule-dots: radial-gradient(circle at 1px 50%, var(--border) 1px, transparent 1px);
    --rule-dots-size: 0.375rem 0.0625rem;
    --rule-dash: repeating-linear-gradient(to right,
                 var(--border) 0 0.375rem, transparent 0.375rem 0.625rem);
    --rule-dash-size: 100% 0.0625rem;

    /* ── Срез угла ────────────────────────────────────────────────────
       Единственная диагональ в доме, замена скруглению. Ступеней ДВЕ, по
       размеру поверхности, и других быть не должно:
         --cut-lg  крупный слой: шторка, шапка, нижний бар, панель
         --cut-sm  мелкий элемент: бейдж, метка, статус
       Было семь размеров одного приёма, пять из них мимо токена (0.3125,
       0.34, 0.4375, 0.5rem прямо в компонентах) — и нижний бар со шторкой,
       которая в него упирается, резались по-разному, хотя комментарий рядом
       требовал «одну и ту же диагональ». Правило: новый срез берёт токен,
       свой размер не заводит. */
    --cut-lg: 1.25rem;
    --cut-sm: 0.375rem;

    --dur-fast: 150ms;
    --dur-normal: 250ms;
    --dur-slow: 400ms;
    --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
    /* #29 */
    --fm-cols: 12;
    --fm-gutter: var(--space-md);
    --fm-breakpoint-md: 37.5rem;
    --fm-breakpoint-lg: 60rem;
}

/* #30 */
body[data-density="compact"] {
    --unit: 0.375rem;        /* #31 */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1.125rem;
    --row-height: 1.75rem;
    --input-min-height: 1.75rem;
    --tap-target: 2rem;
    --content-font: 0.7812rem;
}
body[data-density="comfortable"] {
    --row-height: 2.25rem;
    --input-min-height: 2.25rem;
    --tap-target: 2.5rem;
    --content-font: 0.8125rem;
}
body[data-density="spacious"] {
    --unit: 0.625rem;        /* #32 */
    --space-xs: 0.625rem;
    --space-sm: 0.875rem;
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --row-height: 3rem;
    --input-min-height: 2.75rem;
    --tap-target: 3rem;
    --content-font: 0.9375rem;
}

/* #33 */

/* #34 */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg-base: #f2f0ec;
        --bg-surface: #ffffff;
        --bg-elevated: #e8e5df;
        --text-primary: #1a1a1a;
        --text-secondary: #6b6560;
        --text-muted: #9a9590;
        --border: #d4d0c8;
        --focus-ring: rgba(232, 101, 10, 0.25);
        /* #35 */
        --logo-invert: 1;
    }
}

/* #36 — Chrome is a constant dark brand frame.
   The header, drawer/nav, its footer and the bottom tab-bar all paint on a
   hardcoded dark #0a0a0a background, but their text/icons read the theme
   tokens. In OS light mode those tokens flip dark → dark-on-dark, invisible
   text (Alex's white-theme bug). Re-pin the tokens to their DARK values
   inside the chrome so it stays legible in both themes. Placed after the
   light @media so it wins by source order at equal specificity. Content
   outside the chrome still follows the light theme. */
.header,
.nav,
.nav-footer,
.fm-bottombar,
.fm-qsheet-panel,
/* Шторка отчёта/задачи (`data-sheet` из app.js). Её фон зашит тёмным
   стеклом в motion.css (`#0a0a0a 82%`), а `color` берётся из
   `--text-primary` (layout.css). В светлой теме ОС токен становился
   #1a1a1a — тёмный текст на тёмной панели, и план с вердиктом AI
   пропадали. Тот же баг, что описан выше, просто эту панель забыли
   внести в список. */
.fm-sheet-panel,
/* Панель отправки отчёта и общий стеклянный утилити-класс: фон тоже
   зашит тёмным, значит и токены внутри должны быть тёмные. */
.fm-send,
.mx-glass {
    color-scheme: dark;
    --bg-base: #111111;
    --bg-surface: #1a1a1a;
    --bg-elevated: #222222;
    --text-primary: #e8e4de;
    --text-secondary: #8a8580;
    --text-muted: #5c5752;
    --border: #2e2c28;
}