/**
 * S-Cloud — Design Tokens
 *
 * Système de design "Slate & Indigo" : palette monochromatique sobre,
 * une seule teinte d'accent (indigo), neutrals froids, surfaces calmes.
 *
 * Inspirations : Linear, Vercel, Notion.
 *
 * Convention :
 *   --c-*  : couleur
 *   --r-*  : radius
 *   --sh-* : shadow
 *   --t-*  : typo size
 *   --s-*  : spacing (8pt grid)
 *
 * Tout le CSS de l'app doit consommer ces tokens (pas de hex en dur).
 */

:root {
    /* ─── Neutrals (slate) — assombris de 10% pour plus de présence ────
     * Le fond global passe à un slate-100/200 → les cards blanches ressortent.
     * Les bordures sont elles aussi un cran plus marquées.
     */
    --c-bg-app:        #E8EDF3;     /* ~ slate-150 : fond plus sombre */
    --c-bg-surface:    #FFFFFF;     /* gardé pur — ressort sur le fond gris */
    --c-bg-subtle:     #D8DFE8;     /* zones inactives, plus marquées */
    --c-bg-elevated:   #FFFFFF;
    --c-border-soft:   #E2E8F0;     /* slate-200 : clair, visible sur fond blanc */
    --c-border:        #CBD5E1;     /* slate-300 : bordures inputs */
    --c-border-strong: #94A3B8;     /* slate-400 */
    --c-text:          #0F172A;     /* slate-900 */
    --c-text-muted:    #475569;     /* slate-600 : un cran plus contrasté */
    --c-text-subtle:   #64748B;     /* slate-500 */
    --c-text-inverted: #FFFFFF;

    /* ─── Brand (indigo, accent UNIQUE) ──────────────────────── */
    --c-brand-50:      #EEF2FF;
    --c-brand-100:     #E0E7FF;
    --c-brand-200:     #C7D2FE;
    --c-brand-500:     #4F46E5;     /* indigo-600 : primary */
    --c-brand-600:     #4338CA;     /* hover */
    --c-brand-700:     #3730A3;     /* pressed */
    --c-brand-bg:      var(--c-brand-50);

    /* ─── Sémantique (limité aux statuts) ────────────────────── */
    --c-success:       #15803D;
    --c-success-bg:    #DCFCE7;
    --c-success-border:#86EFAC;
    --c-warning:       #B45309;
    --c-warning-bg:    #FEF3C7;
    --c-warning-border:#FCD34D;
    --c-danger:        #B91C1C;
    --c-danger-bg:     #FEE2E2;
    --c-danger-border: #FCA5A5;
    --c-info:          #1E40AF;
    --c-info-bg:       #DBEAFE;
    --c-info-border:   #93C5FD;

    /* ─── Radius ─────────────────────────────────────────────── */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* ─── Shadows — un cran plus présentes pour faire sortir les cards ─ */
    --sh-xs: 0 1px 2px rgb(15 23 42 / .08);
    --sh-sm: 0 2px 4px rgb(15 23 42 / .10), 0 1px 2px rgb(15 23 42 / .06);
    --sh:    0 6px 18px rgb(15 23 42 / .10);
    --sh-lg: 0 16px 40px rgb(15 23 42 / .14);
    --sh-focus: 0 0 0 3px rgb(79 70 229 / .25);  /* anneau focus indigo plus marqué */

    /* ─── Type (échelle modulaire) ───────────────────────────── */
    --t-xs:   12px;   --lh-xs:  16px;
    --t-sm:   13px;   --lh-sm:  18px;
    --t-base: 14px;   --lh-base:20px;   /* corps standard */
    --t-md:   15px;   --lh-md:  22px;
    --t-lg:   17px;   --lh-lg:  24px;
    --t-xl:   20px;   --lh-xl:  28px;
    --t-2xl:  24px;   --lh-2xl: 32px;
    --t-3xl:  30px;   --lh-3xl: 36px;
    --t-4xl:  36px;   --lh-4xl: 44px;

    /* ─── Font weights ───────────────────────────────────────── */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ─── Tracking ───────────────────────────────────────────── */
    --tracking-tight: -0.02em;
    --tracking-caps:  0.05em;

    /* ─── Spacing 8pt ────────────────────────────────────────── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;

    /* ─── Transitions ────────────────────────────────────────── */
    --tr-fast: 120ms ease;
    --tr:      180ms ease;
    --tr-slow: 280ms ease;

    /* ─── Z-index scale ──────────────────────────────────────── */
    --z-base:    1;
    --z-rail:    1010;
    --z-topbar:  1025;
    --z-dropdown:1030;
    --z-modal:   2400;
    --z-toast:   2500;

    /* ─── Aliases legacy → tokens nouveaux ────────
     * Permet la transition douce sans tout casser : les vieilles
     * variables --ks-* pointent désormais vers les nouveaux tokens.
     * À retirer une fois la refonte complète terminée.
     */
    --ks-bg:          var(--c-bg-app);
    --ks-bg-card:     var(--c-bg-surface);
    --ks-bg-sidebar:  var(--c-bg-subtle);
    --ks-border-soft: var(--c-border-soft);
    --ks-border:      var(--c-border);
    --ks-text:        var(--c-text);
    --ks-text-muted:  var(--c-text-muted);
    --ks-primary:     var(--c-brand-500);
}

/* ──────────────────────────────────────────────────────────────
 * Base reset (typo, focus, sélection)
 * ────────────────────────────────────────────────────────────── */
html, body {
    background: var(--c-bg-app);
    color: var(--c-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    font-size: var(--t-base);
    line-height: var(--lh-base);
}

::selection { background: var(--c-brand-100); color: var(--c-brand-700); }

:focus-visible {
    outline: 2px solid var(--c-brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus, a:focus, input:focus, select:focus, textarea:focus {
    outline: none;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--c-brand-500);
    outline-offset: 2px;
}

/* Échelle de titres cohérente */
h1, .h1 { font-size: var(--t-3xl); line-height: var(--lh-3xl); font-weight: var(--fw-bold);     letter-spacing: var(--tracking-tight); margin: 0 0 var(--s-3); color: var(--c-text); }
h2, .h2 { font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin: 0 0 var(--s-3); color: var(--c-text); }
h3, .h3 { font-size: var(--t-xl);  line-height: var(--lh-xl);  font-weight: var(--fw-semibold); margin: 0 0 var(--s-2); color: var(--c-text); }
h4, .h4 { font-size: var(--t-lg);  line-height: var(--lh-lg);  font-weight: var(--fw-semibold); margin: 0 0 var(--s-2); color: var(--c-text); }
h5, .h5 { font-size: var(--t-md);  line-height: var(--lh-md);  font-weight: var(--fw-semibold); margin: 0 0 var(--s-2); color: var(--c-text); }
h6, .h6 { font-size: var(--t-base);line-height: var(--lh-base);font-weight: var(--fw-semibold); margin: 0 0 var(--s-1); color: var(--c-text); }

.text-muted { color: var(--c-text-muted) !important; }
.text-subtle { color: var(--c-text-subtle) !important; }

a { color: var(--c-brand-500); text-decoration: none; transition: color var(--tr-fast); }
a:hover { color: var(--c-brand-600); text-decoration: underline; }