/*
 * Design-system tokens (docs/charte/tokens.json).
 * Light theme on the root element, dark theme when <html> carries data-bs-theme="dark".
 * Two blocks rather than light-dark(): Tabler recomputes its shades on the element that
 * declares the base color, and a relative color built on light-dark() is not verified.
 * Every color of the application comes from here; no other file writes a color literal.
 */
:root {
    --surface: #f0efe7;
    --surface-raised: #f8f7f3;
    --surface-sunken: #e5e3da;
    --line: #d8d2c4;
    --line-strong: #8a8475;
    --ink: #15201b;
    --ink-muted: #5a6159;
    --ink-faint: #858b85;
    --brand: #0e5a48;
    --brand-hover: #0b4a3b;
    --on-brand: #f0efe7;
    --brand-soft: #dcebe4;
    --accent: #bb792f;
    --accent-soft: #f7e1c4;
    --on-accent: #15201b;
    --success: #1e7729;
    --success-soft: #d1eed1;
    --warning: #8c6800;
    --warning-soft: #feeba6;
    --danger: #b13a2e;
    --danger-soft: #f6dcd8;
    --info: #2f5f8f;
    --info-soft: #dde8f3;
    --cat-client: var(--info);
    --cat-ai: var(--accent);
    --cat-expert: var(--brand);
    --focus: var(--brand);
    --overlay: #15201ba6;
    --shadow-sm: 0 1px 2px #15201b14;
    --shadow-md: 0 8px 24px #15201b1f;

    /* Spacing, 4px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Font families: Fontsource names, then the fallback stacks */
    --font-display: "Bricolage Grotesque Variable", "Helvetica Neue", Arial, sans-serif;
    --font-sans: "Instrument Sans Variable", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "DM Mono", Menlo, Consolas, monospace;
}

html[data-bs-theme="dark"] {
    --surface: #121a16;
    --surface-raised: #1a2420;
    --surface-sunken: #0c1310;
    --line: #2b3730;
    --line-strong: #6b7b70;
    --ink: #f0efe7;
    --ink-muted: #b3bbb3;
    --ink-faint: #7e877f;
    --brand: #4bae87;
    --brand-hover: #66c7a0;
    --on-brand: #0c1310;
    --brand-soft: #163b2c;
    --accent: #eca760;
    --accent-soft: #442d15;
    --on-accent: #0c1310;
    --success: #8ddc7c;
    --success-soft: #1e3b1f;
    --warning: #f9d460;
    --warning-soft: #463600;
    --danger: #ef8a7e;
    --danger-soft: #3f1d19;
    --info: #86b4e2;
    --info-soft: #1a2b3c;
    --overlay: #000000b3;
    --shadow-sm: 0 1px 2px #00000066;
    --shadow-md: 0 8px 24px #00000099;
}