/* SDTO — Variables CSS centralisées (STYLE_GUIDE.md)
   Source de vérité visuelle pour toute UI nouvelle ou refactorée.
   Toute couleur, espacement, rayon, ombre, typographie utilisé dans
   SDT/app/ devrait passer par ces variables.

   À importer en premier dans chaque page :
       <link rel="stylesheet" href="/css/theme.css">
*/

:root {
    /* ── Couleurs — texte ─────────────────────────────── */
    --sdto-text:        #1e293b;  /* Texte principal, headings */
    --sdto-text-2:      #334155;  /* Texte secondaire, body alternatif */
    --sdto-text-3:      #64748b;  /* Texte tertiaire, sous-titres, méta */
    --sdto-text-4:      #94a3b8;  /* Texte muté, placeholders, hint */
    --sdto-text-on-dark:#f8fafc;  /* Texte sur fond foncé */

    /* ── Couleurs — surfaces ──────────────────────────── */
    --sdto-bg:          #f8fafc;  /* Fond de page principal */
    --sdto-bg-2:        #fafbfc;  /* Fond alternatif (footers, zones discrètes) */
    --sdto-surface:     #ffffff;  /* Surface principale (cartes, modales) */
    --sdto-surface-2:   #f1f5f9;  /* Surface secondaire (hovers, badges neutres) */

    /* ── Couleurs — bordures ──────────────────────────── */
    --sdto-border:      #e2e8f0;  /* Bordure standard */
    --sdto-border-2:    #cbd5e1;  /* Bordure plus marquée */

    /* ── Couleurs — accent / sémantique ───────────────── */
    --sdto-primary:        #3b82f6;
    --sdto-primary-hover:  #2563eb;
    --sdto-primary-text:   #1e40af;
    --sdto-primary-bg:     #f0f9ff;

    --sdto-success:        #16a34a;
    --sdto-success-hover:  #15803d;
    --sdto-success-text:   #166534;
    --sdto-success-bg:     #dcfce7;

    --sdto-warning:        #f59e0b;
    --sdto-warning-hover:  #d97706;
    --sdto-warning-text:   #92400e;
    --sdto-warning-bg:     #fef3c7;

    --sdto-danger:         #dc2626;
    --sdto-danger-hover:   #b91c1c;
    --sdto-danger-text:    #991b1b;
    --sdto-danger-bg:      #fee2e2;

    --sdto-info:           #0ea5e9;
    --sdto-info-text:      #075985;
    --sdto-info-bg:        #e0f2fe;

    /* ── Rayons ────────────────────────────────────────── */
    --sdto-radius-sm:   4px;   /* Chips, micro-éléments */
    --sdto-radius-md:   6px;   /* Boutons, inputs */
    --sdto-radius-lg:   8px;   /* Cartes, modales (directive Benoit : 8px max) */
    --sdto-radius-pill: 999px; /* Toasts, pills */

    /* ── Ombres ────────────────────────────────────────── */
    --sdto-shadow-sm:   0 1px 2px rgba(0,0,0,.05);
    --sdto-shadow-md:   0 4px 12px rgba(0,0,0,.08);
    --sdto-shadow-lg:   0 20px 50px rgba(0,0,0,.25);
    --sdto-shadow-toast:0 4px 12px rgba(0,0,0,.18);

    /* ── Espacements ──────────────────────────────────── */
    --sdto-space-1:  4px;
    --sdto-space-2:  8px;
    --sdto-space-3:  12px;
    --sdto-space-4:  16px;
    --sdto-space-5:  20px;
    --sdto-space-6:  24px;
    --sdto-space-8:  32px;
    --sdto-space-12: 48px;

    /* ── Typographie ──────────────────────────────────── */
    --sdto-font-family:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sdto-font-mono:      'SF Mono', 'Fira Code', 'Menlo', monospace;
    --sdto-font-size-xs:   11px;
    --sdto-font-size-sm:   12px;
    --sdto-font-size-base: 13px;
    --sdto-font-size-md:   14px;
    --sdto-font-size-lg:   16px;
    --sdto-font-size-xl:   18px;
    --sdto-font-size-2xl:  22px;
    --sdto-line-tight:     1.25;
    --sdto-line-normal:    1.5;
    --sdto-line-relaxed:   1.6;

    /* ── Z-index conventions ──────────────────────────── */
    --sdto-z-dropdown:    1000;
    --sdto-z-sticky:      1020;
    --sdto-z-modal:       10000;  /* surcouches d'erreur */
    --sdto-z-toast:       10001;  /* toast (au-dessus modal) */
    --sdto-z-confirm:     10002;  /* showConfirm drawer (au-dessus toast) */

    /* ── Animations ───────────────────────────────────── */
    --sdto-transition-fast: 0.15s ease-out;
    --sdto-transition-base: 0.2s ease-out;
}