/* ==========================================================================
   VARIABLES GLOBALES
   ========================================================================== */

@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend-VariableFont_wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Fonds et surfaces */
    --color-background: #f9f4ea;
    --color-surface: #ffffff;
    --color-surface-hover: #f4eee4;
    --color-interactive-hover: #fff5f2;
    --color-card-hover: var(--color-interactive-hover);
    --color-progress-track: var(--color-interactive-hover);
    --color-surface-active: #f0e5da;
    --color-surface-selected: #f7e7e4;

    /* Navigation latérale */
    --color-sidebar-background: #f4eee5;
    --color-sidebar-raised: #fcf8f3;

    /* Bordures */
    --color-border: #e6e1d6;
    --color-border-strong: #cbc3b7;
    --color-focus-contrast: #1a1a1a;

    /*
 * Bordure renforcée des contrôles interactifs :
 * champs, listes, boutons secondaires, propositions.
 */
    --color-control-border: #8a8176;

    /* Textes et icônes */
    --color-text: #1a1a1a;
    --color-text-secondary: #5b5853;
    --color-text-disabled: #8b867f;
    --color-icon: #595650;

    /* Identité Mimir */
    --color-primary: #990000;
    --color-primary-hover: #b00000;
    --color-primary-active: #760000;
    --color-primary-soft: #f7e7e4;
    --color-on-primary: #ffffff;

    /* Couleurs fonctionnelles */
    --color-success: #276738;
    --color-success-background: #e9f4eb;

    --color-warning: #8a5700;
    --color-warning-background: #fff3d9;

    --color-error: #a12020;
    --color-error-background: #fae9e7;

    --color-gold: #b8860b;

    --color-info: #275f88;
    --color-info-background: #e8f1f8;

    /* Espacements */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Formes */
    --radius-small: 0.625rem;
    --radius-medium: 0.875rem;
    --radius-large: 1.125rem;
    --radius-pill: 999px;

    /* Ombres */
    --shadow-low: 0 2px 8px rgb(38 28 20 / 0.07);
    --shadow-medium: 0 8px 24px rgb(38 28 20 / 0.11);

    /* Mouvement */
    --transition-fast: 150ms ease-out;

    /* Dimensions */
    --content-max-width: 74rem;
    --touch-target-min: 2.75rem;

    /* Repérage standard des éléments actifs */
    --focus-ring: 0 0 0 2px var(--color-primary);
    --focus-ring-on-primary:
        0 0 0 2px var(--color-on-primary), 0 0 0 5px var(--color-focus-contrast);
    --color-primary-halo: rgb(153 0 0 / 12%);
    --search-halo: rgb(153 0 0 / 14%);
}

/* ==========================================================================
   MODE SOMBRE — NEUTRES CHAUDS
   ========================================================================== */

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

    --color-background: #1f1d1b;
    --color-surface: #2a2826;
    --color-surface-hover: #34302d;
    --color-interactive-hover: #34302d;
    --color-card-hover: var(--color-interactive-hover);
    --color-progress-track: var(--color-interactive-hover);
    --color-surface-active: #393431;
    --color-surface-selected: #432522;

    --color-sidebar-background: #25221f;
    --color-sidebar-raised: #2e2a27;

    --color-border: #3d3a37;
    --color-border-strong: #57514b;
    --color-focus-contrast: #ece8e2;

    /* Bordure renforcée des contrôles interactifs */
    --color-control-border: #77706a;

    --color-text: #ece8e2;
    --color-text-secondary: #b9b2a9;
    --color-text-disabled: #827c74;
    --color-icon: #d5cfc7;

    /*
     * Le rouge est légèrement éclairci en mode sombre.
     * #990000 resterait trop sombre sur les surfaces anthracite.
     */
    --color-primary: #c23a3a;
    --color-primary-hover: #d74a4a;
    --color-primary-active: #a92b2b;
    --color-primary-soft: #432522;
    --color-on-primary: #ffffff;

    --color-success: #79bd85;
    --color-success-background: #243629;

    --color-warning: #e1ad50;
    --color-warning-background: #3b3020;

    --color-error: #e9827b;
    --color-error-background: #412624;

    --color-gold: #d4af37;

    --color-info: #80b6d8;
    --color-info-background: #24333c;

    --shadow-low: 0 2px 10px rgb(0 0 0 / 0.22);
    --shadow-medium: 0 10px 28px rgb(0 0 0 / 0.3);

    --focus-ring-on-primary:
        0 0 0 2px var(--color-background), 0 0 0 5px var(--color-on-primary);
    --color-primary-halo: rgb(220 70 70 / 28%);
    --search-halo: rgb(220 70 70 / 32%);
}

/* ==========================================================================
   OPTIONS DE LECTURE
   ========================================================================== */

/* Police de lecture
 *
 * Cette option doit primer sur toutes les piles typographiques documentaires,
 * y compris les piles multilingues des extraits. Lexend reste la police de
 * lecture pour les glyphes qu’elle couvre ; les écritures absentes de Lexend
 * utilisent ensuite un repli sans-serif adapté à leur langue.
 */
body.lecture-police,
body.lecture-police * {
    font-family: "Lexend", sans-serif !important;
}

body.lecture-police :lang(ja) {
    font-family:
        "Lexend", "Noto Sans CJK JP", "Yu Gothic", "Hiragino Kaku Gothic ProN",
        sans-serif !important;
}

body.lecture-police :lang(ko) {
    font-family:
        "Lexend", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic",
        sans-serif !important;
}

body.lecture-police :lang(zh),
body.lecture-police :lang(zh-Hans) {
    font-family:
        "Lexend", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC",
        sans-serif !important;
}

body.lecture-police :lang(zh-Hant) {
    font-family:
        "Lexend", "Noto Sans CJK TC", "Microsoft JhengHei", "PingFang TC",
        sans-serif !important;
}

body.lecture-police :lang(ar) {
    font-family:
        "Lexend", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif !important;
}

body.lecture-police :lang(he) {
    font-family:
        "Lexend", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif !important;
}

body.lecture-police :lang(sa),
body.lecture-police :lang(und-Deva) {
    font-family:
        "Lexend", "Noto Sans Devanagari", "Nirmala UI", sans-serif !important;
}

/* Espacement de lecture */
body.lecture-espacement {
    line-height: 1.8;
    letter-spacing: 0.03em;
    word-spacing: 0.12em;
}

body.lecture-espacement button,
body.lecture-espacement input,
body.lecture-espacement textarea,
body.lecture-espacement select {
    letter-spacing: inherit;
    word-spacing: inherit;
}

/* Taille du texte */
body.lecture-taille {
    font-size: 1.125rem;
}

/* Contraste renforcé — mode clair */
body.lecture-contraste {
    --color-border: #aaa094;
    --color-border-strong: #736b62;
    --color-control-border: #514a43;

    --color-text: #000000;
    --color-text-secondary: #302d29;
    --color-text-disabled: #625d56;
    --color-icon: #24211e;
}

/* Contraste renforcé — mode sombre */
html[data-theme="dark"] body.lecture-contraste {
    --color-border: #817a73;
    --color-border-strong: #aaa29a;
    --color-control-border: #c2bab1;

    --color-text: #ffffff;
    --color-text-secondary: #e1dcd5;
    --color-text-disabled: #b1aaa2;
    --color-icon: #ffffff;
}

/* ==========================================================================
   REPÈRES DE NAVIGATION
   ========================================================================== */

body.reperes-navigation {
    --focus-ring:
        0 0 0 2px var(--color-focus-contrast), 0 0 0 6px var(--color-primary);
}

/* ==========================================================================
   BASE GLOBALE
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    background: var(--color-background);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 1rem;
    line-height: 1.55;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Focus clavier visible */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;

    box-shadow: var(--focus-ring);
}

/* Réduction des animations demandée par le système */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}