/* ============================================================
   Crudia UI — Design tokens
   Source unique des valeurs visuelles (couleurs, typo, espacements,
   rayons, ombres, z-index). Tout composant (cr-*) et tout override
   Bootstrap consomme ces variables : ne jamais coder une couleur ou
   un z-index en dur ailleurs.
   Documentation : docs/DESIGN-SYSTEM.md
   ============================================================ */

:root {
    /* ---------- Couleurs : structure ---------- */
    --cr-color-bg: #f3f5f6;                 /* fond applicatif */
    --cr-color-surface: #ffffff;            /* panneaux, tables, cartes */
    --cr-color-surface-subtle: #f8f9f9;     /* en-têtes de table, zones secondaires */
    --cr-color-surface-sunken: #eef1f3;     /* champs readonly, pistes */
    --cr-color-border: #d8dcde;
    --cr-color-border-subtle: #e9ebed;
    --cr-color-border-strong: #b0b8be;
    --cr-color-hover: #f3f5f6;
    --cr-color-selected: #edf4fc;
    --cr-color-selected-border: #b5d1f2;

    /* ---------- Couleurs : texte ---------- */
    --cr-color-text: #2f3941;
    --cr-color-text-strong: #1a2229;
    --cr-color-text-secondary: #525d67;
    --cr-color-text-muted: #646f79;
    --cr-color-text-inverse: #ffffff;
    --cr-color-link: #1f63b5;

    /* ---------- Couleurs : interaction ---------- */
    --cr-color-primary: #1f63b5;
    --cr-color-primary-hover: #17519a;
    --cr-color-primary-active: #134584;
    --cr-color-primary-subtle: #edf4fc;
    --cr-color-primary-border: #b5d1f2;
    --cr-color-focus: #1f63b5;
    --cr-focus-ring: 0 0 0 3px rgba(31, 99, 181, 0.32);
    --cr-focus-ring-danger: 0 0 0 3px rgba(199, 42, 28, 0.30);
    --cr-color-disabled-bg: #f1f2f3;
    --cr-color-disabled-text: #a4acb3;
    --cr-color-disabled-border: #e1e4e6;

    /* ---------- Couleurs : sémantique ---------- */
    --cr-color-success: #1d7a4c;
    --cr-color-success-subtle: #e9f6ef;
    --cr-color-success-border: #aedcc3;
    --cr-color-warning: #a35200;            /* texte/bordure lisible */
    --cr-color-warning-fill: #f2a33a;       /* aplat (barres, points) */
    --cr-color-warning-subtle: #fff5e6;
    --cr-color-warning-border: #f5cf95;
    --cr-color-danger: #c72a1c;
    --cr-color-danger-hover: #a8231a;
    --cr-color-danger-subtle: #fdeceb;
    --cr-color-danger-border: #f2b6b0;
    --cr-color-info: #0f6ca3;
    --cr-color-info-subtle: #e8f4fa;
    --cr-color-info-border: #a9d3ea;
    --cr-color-internal: #fff8e1;           /* note interne (fond) */
    --cr-color-internal-border: #f2d98c;

    /* ---------- Statuts ticket (logique Zendesk : couleur = état) ---------- */
    --cr-status-new: #c98a00;
    --cr-status-new-text: #3d2a00;
    --cr-status-open: #d23f2b;
    --cr-status-pending: #1f6fc5;
    --cr-status-onhold: #2f3941;
    --cr-status-solved: #66727c;
    --cr-status-closed: #c3c9ce;
    --cr-status-closed-text: #2f3941;

    /* ---------- Priorités ---------- */
    --cr-priority-low: #85909a;
    --cr-priority-normal: #2d7fd6;
    --cr-priority-high: #d9730d;
    --cr-priority-urgent: #c72a1c;

    /* ---------- Shell (navigation produit) ---------- */
    --cr-shell-sidebar-bg: #16222d;
    --cr-shell-sidebar-bg-hover: #223241;
    --cr-shell-sidebar-bg-active: #2b3f51;
    --cr-shell-sidebar-text: #c4ced6;
    --cr-shell-sidebar-text-strong: #ffffff;
    --cr-shell-sidebar-text-muted: #7f8f9c;
    --cr-shell-sidebar-accent: #5aa2f0;
    --cr-shell-sidebar-width: 224px;
    --cr-shell-sidebar-width-collapsed: 56px;
    --cr-shell-topbar-height: 48px;
    --cr-brand: #1d7a4c;

    /* ---------- Typographie ---------- */
    --cr-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --cr-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --cr-font-size-xs: 11px;
    --cr-font-size-sm: 12px;
    --cr-font-size-md: 14px;                /* texte UI par défaut */
    --cr-font-size-table: 13px;             /* cellules de table denses */
    --cr-font-size-lg: 16px;
    --cr-font-size-xl: 18px;                /* titre de page */
    --cr-font-size-xxl: 22px;               /* chiffres KPI */
    --cr-line-height-xs: 14px;
    --cr-line-height-sm: 16px;
    --cr-line-height-md: 20px;
    --cr-line-height-lg: 24px;
    --cr-font-weight-regular: 400;
    --cr-font-weight-medium: 500;
    --cr-font-weight-semibold: 600;
    --cr-font-weight-bold: 700;

    /* ---------- Espacements (échelle 2/4) ---------- */
    --cr-space-0: 0;
    --cr-space-1: 2px;
    --cr-space-2: 4px;
    --cr-space-3: 6px;
    --cr-space-4: 8px;
    --cr-space-5: 12px;
    --cr-space-6: 16px;
    --cr-space-7: 20px;
    --cr-space-8: 24px;
    --cr-space-9: 32px;
    --cr-space-10: 40px;

    /* ---------- Contrôles ---------- */
    --cr-control-height-sm: 28px;
    --cr-control-height-md: 32px;
    --cr-control-height-lg: 36px;
    --cr-control-padding-x: 10px;

    /* ---------- Rayons (volontairement contenus) ---------- */
    --cr-radius-sm: 3px;
    --cr-radius-md: 4px;
    --cr-radius-lg: 6px;
    --cr-radius-pill: 999px;

    /* ---------- Bordures ---------- */
    --cr-border-width: 1px;
    --cr-border: 1px solid var(--cr-color-border);
    --cr-border-subtle: 1px solid var(--cr-color-border-subtle);

    /* ---------- Ombres (uniquement pour ce qui flotte) ---------- */
    --cr-shadow-none: none;
    --cr-shadow-raised: 0 1px 2px rgba(20, 31, 41, 0.08);
    --cr-shadow-overlay: 0 4px 16px rgba(20, 31, 41, 0.14), 0 1px 4px rgba(20, 31, 41, 0.08);
    --cr-shadow-modal: 0 16px 48px rgba(20, 31, 41, 0.22), 0 2px 8px rgba(20, 31, 41, 0.10);

    /* ---------- Z-index (échelle unique — aucun z-index arbitraire) ----------
       base < raised < sticky < shell < drawer < modal < popover < toast < tooltip < critical.
       Les popovers/menus sont AU-DESSUS des modales : un menu ouvert depuis une modale doit
       rester visible ; un menu se ferme toujours avant l'ouverture d'une modale. */
    --cr-z-base: 0;
    --cr-z-raised: 1;
    --cr-z-sticky: 10;
    --cr-z-shell: 100;
    --cr-z-drawer: 1000;
    --cr-z-modal: 1100;
    --cr-z-popover: 1200;
    --cr-z-toast: 1300;
    --cr-z-tooltip: 1400;
    --cr-z-critical: 2000;

    /* ---------- Mouvement (fonctionnel, jamais décoratif) ---------- */
    --cr-duration-fast: 80ms;
    --cr-duration-base: 140ms;
    --cr-easing: cubic-bezier(0.2, 0, 0, 1);

    /* ============================================================
       Alignement Bootstrap 5.3 : les pages existantes héritent
       immédiatement de la densité et de la palette Crudia.
       ============================================================ */
    --bs-body-font-family: var(--cr-font-family);
    --bs-body-font-size: var(--cr-font-size-md);
    --bs-body-line-height: 1.4286;
    --bs-body-color: var(--cr-color-text);
    --bs-body-color-rgb: 47, 57, 65;
    --bs-body-bg: var(--cr-color-bg);
    --bs-emphasis-color: var(--cr-color-text-strong);
    --bs-secondary-color: var(--cr-color-text-secondary);
    --bs-tertiary-color: var(--cr-color-text-muted);
    --bs-secondary-bg: var(--cr-color-surface-sunken);
    --bs-tertiary-bg: var(--cr-color-surface-subtle);
    --bs-heading-color: var(--cr-color-text-strong);
    --bs-link-color: var(--cr-color-link);
    --bs-link-color-rgb: 31, 99, 181;
    --bs-link-hover-color: var(--cr-color-primary-hover);
    --bs-link-hover-color-rgb: 23, 81, 154;
    --bs-border-color: var(--cr-color-border);
    --bs-border-color-translucent: rgba(20, 31, 41, 0.12);
    --bs-border-radius: var(--cr-radius-md);
    --bs-border-radius-sm: var(--cr-radius-sm);
    --bs-border-radius-lg: var(--cr-radius-lg);
    --bs-border-radius-xl: var(--cr-radius-lg);
    --bs-border-radius-xxl: var(--cr-radius-lg);
    --bs-border-radius-pill: var(--cr-radius-pill);
    --bs-box-shadow: var(--cr-shadow-overlay);
    --bs-box-shadow-sm: var(--cr-shadow-raised);
    --bs-box-shadow-lg: var(--cr-shadow-modal);
    --bs-focus-ring-color: rgba(31, 99, 181, 0.32);

    --bs-primary: var(--cr-color-primary);
    --bs-primary-rgb: 31, 99, 181;
    --bs-primary-text-emphasis: #134584;
    --bs-primary-bg-subtle: var(--cr-color-primary-subtle);
    --bs-primary-border-subtle: var(--cr-color-primary-border);
    --bs-secondary: #5f6b75;
    --bs-secondary-rgb: 95, 107, 117;
    --bs-secondary-text-emphasis: #2f3941;
    --bs-secondary-bg-subtle: #eef1f3;
    --bs-secondary-border-subtle: #d8dcde;
    --bs-success: var(--cr-color-success);
    --bs-success-rgb: 29, 122, 76;
    --bs-success-text-emphasis: #145a37;
    --bs-success-bg-subtle: var(--cr-color-success-subtle);
    --bs-success-border-subtle: var(--cr-color-success-border);
    --bs-warning: var(--cr-color-warning-fill);
    --bs-warning-rgb: 242, 163, 58;
    --bs-warning-text-emphasis: #7a3d00;
    --bs-warning-bg-subtle: var(--cr-color-warning-subtle);
    --bs-warning-border-subtle: var(--cr-color-warning-border);
    --bs-danger: var(--cr-color-danger);
    --bs-danger-rgb: 199, 42, 28;
    --bs-danger-text-emphasis: #8a1e14;
    --bs-danger-bg-subtle: var(--cr-color-danger-subtle);
    --bs-danger-border-subtle: var(--cr-color-danger-border);
    --bs-info: var(--cr-color-info);
    --bs-info-rgb: 15, 108, 163;
    --bs-info-text-emphasis: #0a4d75;
    --bs-info-bg-subtle: var(--cr-color-info-subtle);
    --bs-info-border-subtle: var(--cr-color-info-border);
    --bs-light: #f8f9f9;
    --bs-light-rgb: 248, 249, 249;
    --bs-light-bg-subtle: #fbfbfc;
    --bs-dark: #1a2229;
    --bs-dark-rgb: 26, 34, 41;
}