/* =============================================================================
   Theme «exo-2026» — the exo.bz brandbook of 28.09.2026 (blend «Как сейчас, с
   лицом»: Google Sans, the teal accent, greenish neutrals, the dark green header).
   Brandbook: https://claude.ai/artifact/HBuNxmYfKawsKPUR3jEhDD; the ready block and
   the old → new map live in .ai/design-system/brandbook/ (tokens.css, TRANSITION.md).
   Loaded when THEME_EXO_2026 is on. How to change the look: ../README.md.

   Two levels. The BASE scales (12 steps, Radix roles: 1-2 grounds, 3-5 component
   grounds, 6-8 lines, 9-10 solid fills, 11-12 text) live ONLY in this file.
   The bricks (design-system.css), base.html and the screens use the SEMANTIC
   tokens («what we paint + role»). Every text/ground pair the bricks use passes
   WCAG 2.2 AA — the lowest text pair 5.19:1, the lowest mark 3.17:1.
   ============================================================================= */

:root {
    /* ---- base scales: never used outside this file ---- */
    --sage-1: #F8FBF6; --sage-2: #F3F5F0; --sage-3: #E9EFE7; --sage-4: #E2E8E0; --sage-5: #DAE0D7; --sage-6: #D0D7CC;
    --sage-7: #B9C1B5; --sage-8: #848C7F; --sage-9: #61695D; --sage-10: #586154; --sage-11: #4F574B; --sage-12: #1E241B;
    --teal-1: #F4FDFC; --teal-2: #EAFAF7; --teal-3: #DAF4F1; --teal-4: #CBEFEA; --teal-5: #BBE8E2; --teal-6: #A9DED7;
    --teal-7: #8FCBC4; --teal-8: #509B93; --teal-9: #0F766E; --teal-10: #006860; --teal-11: #006059; --teal-12: #003F3A;
    --green-1: #F6FEF4; --green-2: #EDFBE9; --green-3: #DFF6D9; --green-4: #CFEEC9; --green-5: #C1E8B9; --green-6: #B2DEA8;
    --green-7: #99CB8E; --green-8: #639E56; --green-9: #358121; --green-10: #297613; --green-11: #185D00; --green-12: #0F4101;
    --amber-1: #FFFAF5; --amber-2: #FFF4E7; --amber-3: #FFEAD2; --amber-4: #FDE1C0; --amber-5: #FAD7AC; --amber-6: #F2CA99;
    --amber-7: #E2B57D; --amber-8: #B4813A; --amber-9: #905C00; --amber-10: #7B4F00; --amber-11: #724800; --amber-12: #4B2E00;
    --red-1: #FFFAF9; --red-2: #FFF3F1; --red-3: #FFE8E5; --red-4: #FFDDD9; --red-5: #FFD0CA; --red-6: #FFC0B8;
    --red-7: #FFA196; --red-8: #D76359; --red-9: #BC2826; --red-10: #A90913; --red-11: #9D0711; --red-12: #680509;
    --blue-1: #F9FBFF; --blue-2: #F0F6FF; --blue-3: #E4EFFF; --blue-4: #D8E8FF; --blue-5: #C9DFFF; --blue-6: #B6D4FF;
    --blue-7: #95C0FF; --blue-8: #578CDB; --blue-9: #2065C5; --blue-10: #0954B3; --blue-11: #074EA6; --blue-12: #04326F;
    --sky-1: #F7FCFF; --sky-2: #ECF8FF; --sky-3: #DBF2FF; --sky-4: #CBECFE; --sky-5: #BBE4FA; --sky-6: #AAD9F3;
    --sky-7: #90C6E3; --sky-8: #5395B7; --sky-9: #04729B; --sky-10: #006285; --sky-11: #005A7B; --sky-12: #003B52;
    --white: #FFFFFF;
    --pine-ground: #1F3A2D; --pine-raised: #2D493B; --pine-line: #385044; --pine-text: #EFF5F2; --pine-text-2: #C9D9D0;

    /* grounds: the page, cards and tables, table rows */
    --bg-page: var(--sage-2);
    --bg-surface: var(--white);
    --bg-surface-2: var(--sage-1);
    --bg-surface-3: var(--sage-3);
    --bg-row-hover: var(--sage-1);
    --bg-row-selected: var(--sage-4);
    --bg-row-selected-hover: var(--sage-5);
    --bg-row-replace: var(--amber-1);
    --bg-row-replace-hover: var(--amber-2);
    --bg-row-removed: var(--red-1);
    --bg-row-removed-hover: var(--red-2);
    /* an order row «Выполнен Execution Department» in the CRM lists (owner, 28.09: keep the green row) */
    --bg-row-done: var(--green-3);

    /* lines; border-control is the field and quiet-button border, 3:1 (WCAG 1.4.11) */
    --border: var(--sage-6);
    --border-strong: var(--sage-7);
    --border-control: var(--sage-8);
    --border-row-selected: var(--teal-9);
    --border-row-replace: var(--amber-8);
    --border-row-removed: var(--red-8);

    /* text */
    --text: var(--sage-12);
    --text-2: var(--sage-11);
    --text-3: var(--sage-9);
    --text-on-solid: var(--white);

    /* the accent means ACTION only: the one filled button, links (always underlined), ticks, the focus ring */
    --bg-accent: var(--teal-9);
    --bg-accent-hover: var(--teal-10);
    --text-accent: var(--teal-11);
    --text-accent-hover: var(--teal-12);
    --focus-ring: var(--teal-9);

    /* tones for messages, panels and inline text */
    --bg-danger: var(--red-9);
    --bg-danger-hover: var(--red-10);
    --bg-danger-soft: var(--red-2);
    --border-danger: var(--red-9);
    --text-danger: var(--red-11);
    --bg-warning-soft: var(--amber-2);
    --border-warning: var(--amber-7);
    --text-warning: var(--amber-11);
    --bg-success: var(--green-9);
    --text-success: var(--green-11);

    /* status chips — the one form of an object's state; any two stay 12+ ΔE2000 apart for colour-blind readers */
    --bg-status-neutral: var(--white);
    --border-status-neutral: var(--sage-7);
    --text-status-neutral: var(--sage-11);
    --bg-status-progress: var(--blue-5);
    --border-status-progress: var(--blue-7);
    --text-status-progress: var(--blue-11);
    --bg-status-success: var(--green-2);
    --border-status-success: var(--green-7);
    --text-status-success: var(--green-10);
    --bg-status-warning: var(--amber-4);
    --border-status-warning: var(--amber-7);
    --text-status-warning: var(--amber-12);
    --bg-status-info: var(--sky-1);
    --border-status-info: var(--sky-7);
    --text-status-info: var(--sky-11);
    --bg-status-danger: var(--red-9);
    --border-status-danger: var(--red-9);
    --text-status-danger: var(--white);

    /* the dark green header and menu — the face of the system */
    --bg-nav: var(--pine-ground);
    --bg-nav-hover: var(--pine-raised);
    --border-nav: var(--pine-line);
    --border-nav-active: var(--teal-7);
    --text-nav: var(--pine-text);
    --text-nav-2: var(--pine-text-2);
    /* a group heading and a small label inside a group */
    --text-nav-group: var(--pine-text);
    --text-nav-label: var(--pine-text-2);
    /* the team balance and the WIP count in the menu (owner, 28.09: keep three colours);
       light tones, each 6.3:1 or more against --bg-nav (tests/test_design_system.py) */
    --text-nav-warning: var(--amber-7);
    --text-nav-danger: var(--red-7);
    --text-nav-success: var(--green-7);

    /* the message after an action; the dimming behind a confirm window */
    --bg-toast: var(--sage-12);
    --bg-overlay: #1E241B6B;

    /* type: one family; numbers use tabular figures; nothing below 12px, no capitals */
    --font-sans: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', Menlo, Consolas, monospace;
    --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-h2: 18px; --fs-title: 22px; --fs-kpi: 40px; --fs-big: 56px;
    --lh-xs: 16px; --lh-sm: 18px; --lh-base: 20px; --lh-h2: 24px; --lh-title: 28px;
    --w-regular: 400; --w-medium: 500; --w-semibold: 600;

    /* spacing (4px steps), radius, heights; a table row is h-row plus its 1px line */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
    --radius-sm: 4px; --radius: 6px; --radius-card: 10px;
    --h-control: 34px; --h-control-sm: 30px; --h-control-lg: 40px; --h-row: 34px; --h-row-head: 32px; --h-chip: 22px; --h-topbar: 44px; --w-sidebar: 220px;

    /* shadows: almost none — a card is set off by its line, only a window and a message float */
    --shadow-card: 0 1px 2px #1E241B0D;
    --shadow-bar: 0 6px 16px #1E241B1A;
    --shadow-pop: 0 20px 48px #1E241B38;
}