/* =============================================================================
   Onagre UI — design tokens (source de vérité unique, docs/design/UI-UX-REDESIGN-2026.md)

   Toutes les couleurs sont en OKLCH : luminance perceptuelle maîtrisée, contrastes prévisibles entre thèmes.
   Les composants n'utilisent QUE des variables --o-* ; aucune couleur littérale ailleurs.
   Thème : attribut data-theme="light|dark" posé sur <html> avant le premier rendu (js/theme-init.js).
   ============================================================================= */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-opsz.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-opsz.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2-variations");
}

:root {
    /* --- Typographie ------------------------------------------------------ */
    --o-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --o-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    /* cv11 : « a » simple ; ss03 : chiffres arrondis plus lisibles ; calt pour les flèches */
    --o-font-features: "cv11", "ss03", "calt";

    --o-text-2xs: 0.6875rem;  /* 11 — micro-labels, kbd */
    --o-text-xs: 0.75rem;     /* 12 — métadonnées, en-têtes de tableau */
    --o-text-sm: 0.8125rem;   /* 13 — texte d'interface dense, tableaux */
    --o-text-md: 0.875rem;    /* 14 — texte courant */
    --o-text-lg: 1rem;        /* 16 — titres de carte */
    --o-text-xl: 1.25rem;     /* 20 — titres de section */
    --o-text-2xl: 1.5rem;     /* 24 — titres de page */
    --o-text-3xl: 1.875rem;   /* 30 — métriques principales */
    --o-text-4xl: 2.5rem;     /* 40 — chiffre héros */

    --o-leading-tight: 1.2;
    --o-leading-snug: 1.35;
    --o-leading-normal: 1.5;

    --o-weight-regular: 420;
    --o-weight-medium: 520;
    --o-weight-semibold: 600;
    --o-weight-bold: 680;

    --o-tracking-tight: -0.018em;
    --o-tracking-display: -0.024em;
    --o-tracking-caps: 0.04em;

    /* --- Espacements (grille de 4 px) ----------------------------------- */
    --o-space-0: 0;
    --o-space-px: 1px;
    --o-space-0-5: 0.125rem;
    --o-space-1: 0.25rem;
    --o-space-1-5: 0.375rem;
    --o-space-2: 0.5rem;
    --o-space-2-5: 0.625rem;
    --o-space-3: 0.75rem;
    --o-space-4: 1rem;
    --o-space-5: 1.25rem;
    --o-space-6: 1.5rem;
    --o-space-8: 2rem;
    --o-space-10: 2.5rem;
    --o-space-12: 3rem;
    --o-space-16: 4rem;

    /* --- Rayons ------------------------------------------------------------ */
    --o-radius-xs: 4px;
    --o-radius-sm: 6px;    /* contrôles, badges */
    --o-radius-md: 8px;    /* champs, boutons */
    --o-radius-lg: 12px;   /* cartes */
    --o-radius-xl: 16px;   /* dialogues */
    --o-radius-full: 999px;

    /* --- Dimensions --------------------------------------------------------- */
    --o-control-sm: 1.75rem;   /* 28 */
    --o-control-md: 2.125rem;  /* 34 */
    --o-control-lg: 2.5rem;    /* 40 */
    --o-sidebar-width: 15.5rem;
    --o-sidebar-collapsed: 3.75rem;
    --o-topbar-height: 3.25rem;
    --o-content-max: 90rem;
    --o-content-narrow: 48rem;

    /* --- Mouvement ------------------------------------------------------------ */
    --o-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --o-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --o-duration-fast: 120ms;
    --o-duration-base: 180ms;
    --o-duration-slow: 260ms;

    /* --- Plans (z-index) ------------------------------------------------------- */
    --o-z-sticky: 20;
    --o-z-sidebar: 30;
    --o-z-dropdown: 40;
    --o-z-overlay: 50;
    --o-z-dialog: 60;
    --o-z-toast: 70;
    --o-z-tooltip: 80;

    /* --- Marque ------------------------------------------------------------------- */
    /* L'onagre (Oenothera) est une fleur qui s'ouvre au crépuscule : jaune primevère sur une nuit chaude,
       réservés à la marque (visuel de connexion, encart d'offre, avatar). Charte : brand/README.md */
    --o-brand-primrose: oklch(0.87 0.16 96);
    --o-brand-amber: oklch(0.64 0.15 48);
    --o-brand-night: oklch(0.2 0.02 70);
    --o-brand-dusk: oklch(0.42 0.16 275);
}

/* =============================================================================
   Thème clair — surfaces légèrement teintées (teinte chaude de la nuit de marque), jamais un blanc agressif.
   Accent neutre : l'encre du logo. Les seules couleurs franches de l'interface sont les états.
   ============================================================================= */
:root,
[data-theme="light"] {
    color-scheme: light;

    --o-bg: oklch(0.982 0.004 80);
    --o-bg-sidebar: oklch(0.966 0.006 80);
    --o-surface: oklch(0.997 0.002 80);
    --o-surface-2: oklch(0.975 0.004 80);
    --o-surface-raised: oklch(0.997 0.002 80);
    --o-surface-hover: oklch(0.955 0.006 80);
    --o-surface-active: oklch(0.93 0.008 80);
    --o-surface-inverse: oklch(0.24 0.01 70);

    --o-border-subtle: oklch(0.935 0.006 80);
    --o-border: oklch(0.9 0.008 80);
    --o-border-strong: oklch(0.82 0.011 80);

    --o-text: oklch(0.22 0.01 70);
    --o-text-2: oklch(0.43 0.011 70);
    --o-text-3: oklch(0.54 0.011 70);
    --o-text-disabled: oklch(0.72 0.008 75);
    --o-text-inverse: oklch(0.98 0.004 85);

    /* Accent = encre du logo (boutons principaux, sélection) ; la couleur reste réservée aux états */
    --o-accent: oklch(0.255 0.008 70);
    --o-accent-hover: oklch(0.34 0.01 70);
    --o-accent-active: oklch(0.4 0.012 70);
    --o-accent-fg: oklch(0.255 0.008 70);
    --o-accent-soft: oklch(0.94 0.009 80);
    --o-accent-soft-hover: oklch(0.91 0.012 80);
    --o-on-accent: oklch(0.985 0.004 85);

    --o-focus: oklch(0.6 0.15 52 / 0.9);

    /* États génériques : base (pastilles, icônes), fg (texte AA sur soft), soft (fond), line (bordure) */
    --o-ok: oklch(0.63 0.155 152);
    --o-ok-fg: oklch(0.44 0.12 152);
    --o-ok-soft: oklch(0.962 0.035 152);
    --o-ok-line: oklch(0.86 0.08 152);

    --o-warn: oklch(0.76 0.155 72);
    --o-warn-fg: oklch(0.5 0.12 62);
    --o-warn-soft: oklch(0.972 0.045 86);
    --o-warn-line: oklch(0.88 0.1 82);

    --o-danger: oklch(0.6 0.215 25);
    --o-danger-fg: oklch(0.5 0.19 25);
    --o-danger-soft: oklch(0.965 0.025 22);
    --o-danger-line: oklch(0.87 0.07 22);

    --o-info: oklch(0.62 0.13 232);
    --o-info-fg: oklch(0.47 0.12 236);
    --o-info-soft: oklch(0.963 0.025 232);
    --o-info-line: oklch(0.87 0.06 232);

    --o-maint: oklch(0.57 0.17 300);
    --o-maint-fg: oklch(0.47 0.16 300);
    --o-maint-soft: oklch(0.965 0.025 300);
    --o-maint-line: oklch(0.88 0.06 300);

    --o-neutral: oklch(0.66 0.012 70);
    --o-neutral-fg: oklch(0.44 0.012 70);
    --o-neutral-soft: oklch(0.955 0.005 80);
    --o-neutral-line: oklch(0.88 0.008 80);

    /* Graphiques : grille, axes, séries catégorielles (6), couleurs sémantiques reprises des états */
    --o-chart-grid: oklch(0.93 0.006 80);
    --o-chart-axis: oklch(0.54 0.011 70);
    --o-chart-1: oklch(0.56 0.2 263);
    --o-chart-2: oklch(0.65 0.12 185);
    --o-chart-3: oklch(0.58 0.17 300);
    --o-chart-4: oklch(0.74 0.15 70);
    --o-chart-5: oklch(0.62 0.19 350);
    --o-chart-6: oklch(0.6 0.03 265);

    --o-scrim: oklch(0.2 0.015 70 / 0.38);

    --o-shadow-xs: 0 1px 1px oklch(0.2 0.02 265 / 0.04);
    --o-shadow-sm: 0 1px 2px oklch(0.2 0.02 265 / 0.06), 0 1px 1px oklch(0.2 0.02 265 / 0.03);
    --o-shadow-md: 0 6px 16px -4px oklch(0.2 0.02 265 / 0.1), 0 2px 4px -1px oklch(0.2 0.02 265 / 0.05);
    --o-shadow-lg: 0 24px 48px -12px oklch(0.2 0.02 265 / 0.22), 0 4px 10px -2px oklch(0.2 0.02 265 / 0.06);
    --o-highlight: inset 0 1px 0 oklch(1 0 0 / 0.6);
}

/* =============================================================================
   Thème sombre — hiérarchie de surfaces brun très sombre (jamais un noir uniforme), bordures discrètes.
   Accent = le clair du logo inversé.
   ============================================================================= */
[data-theme="dark"] {
    color-scheme: dark;

    --o-bg: oklch(0.158 0.007 70);
    --o-bg-sidebar: oklch(0.142 0.007 70);
    --o-surface: oklch(0.188 0.008 70);
    --o-surface-2: oklch(0.172 0.008 70);
    --o-surface-raised: oklch(0.215 0.009 70);
    --o-surface-hover: oklch(0.228 0.01 70);
    --o-surface-active: oklch(0.26 0.012 70);
    --o-surface-inverse: oklch(0.93 0.006 85);

    --o-border-subtle: oklch(0.228 0.009 70);
    --o-border: oklch(0.268 0.01 70);
    --o-border-strong: oklch(0.345 0.013 70);

    --o-text: oklch(0.955 0.005 85);
    --o-text-2: oklch(0.76 0.011 80);
    --o-text-3: oklch(0.63 0.013 75);
    --o-text-disabled: oklch(0.45 0.01 70);
    --o-text-inverse: oklch(0.2 0.01 70);

    --o-accent: oklch(0.93 0.008 85);
    --o-accent-hover: oklch(0.98 0.005 85);
    --o-accent-active: oklch(0.86 0.01 85);
    --o-accent-fg: oklch(0.93 0.008 85);
    --o-accent-soft: oklch(0.27 0.012 72);
    --o-accent-soft-hover: oklch(0.31 0.014 72);
    --o-on-accent: oklch(0.2 0.01 70);

    --o-focus: oklch(0.76 0.14 62 / 0.9);

    --o-ok: oklch(0.72 0.16 152);
    --o-ok-fg: oklch(0.8 0.13 152);
    --o-ok-soft: oklch(0.255 0.045 152);
    --o-ok-line: oklch(0.38 0.08 152);

    --o-warn: oklch(0.8 0.15 78);
    --o-warn-fg: oklch(0.85 0.12 84);
    --o-warn-soft: oklch(0.27 0.045 78);
    --o-warn-line: oklch(0.42 0.08 78);

    --o-danger: oklch(0.68 0.19 24);
    --o-danger-fg: oklch(0.79 0.13 24);
    --o-danger-soft: oklch(0.265 0.06 24);
    --o-danger-line: oklch(0.42 0.11 24);

    --o-info: oklch(0.72 0.12 232);
    --o-info-fg: oklch(0.8 0.1 232);
    --o-info-soft: oklch(0.255 0.045 236);
    --o-info-line: oklch(0.4 0.08 236);

    --o-maint: oklch(0.71 0.15 300);
    --o-maint-fg: oklch(0.81 0.1 300);
    --o-maint-soft: oklch(0.265 0.055 300);
    --o-maint-line: oklch(0.42 0.1 300);

    --o-neutral: oklch(0.6 0.012 70);
    --o-neutral-fg: oklch(0.76 0.012 75);
    --o-neutral-soft: oklch(0.245 0.009 70);
    --o-neutral-line: oklch(0.36 0.011 70);

    --o-chart-grid: oklch(0.26 0.01 70);
    --o-chart-axis: oklch(0.62 0.012 75);
    --o-chart-1: oklch(0.68 0.16 263);
    --o-chart-2: oklch(0.74 0.11 185);
    --o-chart-3: oklch(0.7 0.14 300);
    --o-chart-4: oklch(0.8 0.14 74);
    --o-chart-5: oklch(0.72 0.16 350);
    --o-chart-6: oklch(0.66 0.025 265);

    --o-scrim: oklch(0.08 0.01 265 / 0.62);

    --o-shadow-xs: 0 1px 1px oklch(0 0 0 / 0.3);
    --o-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
    --o-shadow-md: 0 8px 20px -6px oklch(0 0 0 / 0.55), 0 2px 4px -1px oklch(0 0 0 / 0.3);
    --o-shadow-lg: 0 28px 56px -12px oklch(0 0 0 / 0.7), 0 4px 12px -2px oklch(0 0 0 / 0.4);
    --o-highlight: inset 0 1px 0 oklch(1 0 0 / 0.04);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --o-duration-fast: 0ms;
        --o-duration-base: 0ms;
        --o-duration-slow: 0ms;
    }
}