/** Design tokens (:root) — couleurs, typo, espacements */
/* ─────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* ── Couleurs de marque Cali&Co ──────────────────────────────────── */
    --brand-blue:         #006EB9;   /* primaire — boutons, liens, accents */
    --brand-blue-hover:   #005a9e;   /* hover du primaire */
    --brand-blue-dark:    #003B5C;   /* dégradés profonds (login, hero) */
    --brand-blue-darker:  #002940;   /* fin de dégradé très profond */
    --brand-blue-light:   #f0f9ff;   /* fond hover/sélection très clair */
    --brand-blue-soft:    #e0f2fe;   /* fond info doux */
    --brand-yellow:       #FFBC00;   /* accent secondaire (à utiliser avec parcimonie) */

    /* ── Fond global de l'app (refonte UI 2026, réf Pennylane) ─────── */
    --color-bg-app:       #fafafa;   /* fond pâle des pages, pas blanc pur */
    --color-bg-surface:   #ffffff;   /* fond des cards, modals, surfaces */

    /* ── Échelle de gris neutres (slate) ─────────────────────────────── */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* ── Couleurs sémantiques (statuts) ──────────────────────────────── */
    /* Success (vert) */
    --color-success:        #16a34a;
    --color-success-hover:  #15803d;
    --color-success-bg:     #dcfce7;
    --color-success-text:   #166534;
    --color-success-border: #86efac;
    /* Warning (orange/jaune) */
    --color-warning:        #d97706;
    --color-warning-hover:  #b45309;
    --color-warning-bg:     #fef3c7;
    --color-warning-text:   #92400e;
    --color-warning-border: #fcd34d;
    /* Danger (rouge) */
    --color-danger:         #dc2626;
    --color-danger-hover:   #b91c1c;
    --color-danger-bg:      #fef2f2;
    --color-danger-text:    #991b1b;
    --color-danger-border:  #fecaca;
    /* Info (bleu) */
    --color-info:           var(--brand-blue);
    --color-info-bg:        var(--brand-blue-light);
    --color-info-text:      #0369a1;
    --color-info-border:    #7dd3fc;

    /* ── Espacements — grille de 4px ─────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Border-radius ────────────────────────────────────────────────
       Refonte UI 2026 (référence Pennylane / Stripe / Qonto) : on baisse
       tous les radius pour donner une perception "logiciel financier
       sérieux" plutôt que "app consumer arrondie". Une seule échelle de
       3 valeurs au lieu de 4-5.
       ─────────────────────────────────────────────────────────────── */
    --radius-sm:   4px;     /* badges, chips, petits éléments inline */
    --radius-md:   6px;     /* boutons, inputs, modals header bar */
    --radius-lg:   8px;     /* cards, modals, sections principales */
    --radius-xl:   10px;    /* hero / login (rare) */
    --radius-full: 9999px;

    /* ── Bordures de surface (NOUVEAU - remplace les ombres sur cards)
       Pennylane / Stripe utilisent une bordure 1px fine plutôt qu'une
       ombre portée. C'est plus net, plus pro, et n'occupe pas d'espace
       visuel. Les ombres ne restent que pour les éléments "qui flottent"
       (modals, dropdowns, popovers). */
    --border-card:    1px solid #e5e7eb;
    --border-subtle:  1px solid var(--gray-100);

    /* ── Ombres ──────────────────────────────────────────────────────
       Drastiquement allégées. Les cards ne portent plus d'ombre du tout
       (elles ont une bordure 1px à la place). Les ombres ne sont plus
       utilisées que pour les éléments réellement flottants. */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06);        /* dropdowns */
    --shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.08);       /* modals */
    --shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.12);      /* very rare */
    --shadow-brand: 0 1px 2px rgba(0, 110, 185, 0.18);    /* aplat + ombre subtile */

    /* ── Typographie ──────────────────────────────────────────────────
       Refonte UI 2026 (référence Pennylane / Linear) : base 14px au lieu
       de 16px. Densité d'information accrue, sensation "outil pro" plus
       forte. Échelle réduite à 6 valeurs (était 7). */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    /* Stack avec tabular-nums : à utiliser sur les colonnes de montants,
       dates, IDs, pour que les chiffres s'alignent verticalement. */
    --font-numeric: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --text-xs:   0.6875rem; /* 11 — micro-labels, mentions légales */
    --text-sm:   0.8125rem; /* 13 — texte secondaire, hints, badges */
    --text-base: 0.875rem;  /* 14 — TEXTE COURANT (NOUVEAU défaut) */
    --text-md:   0.9375rem; /* 15 — emphase légère, titres de cards */
    --text-lg:   1.0625rem; /* 17 — titres de section */
    --text-xl:   1.25rem;   /* 20 — titre de page */
    --text-2xl:  1.5rem;    /* 24 — hero exceptionnel */

    /* ── Transitions ─────────────────────────────────────────────────── */
    --transition-fast: 0.12s ease;
    --transition-base: 0.18s ease;
    --transition-slow: 0.25s ease;

    /* ── Z-index ─────────────────────────────────────────────────────── */
    --z-header:   100;
    --z-dropdown: 200;
    --z-modal:    1000;
    --z-toast:    9999;

    /* ── Layout (refonte 2026 — réf Pennylane) ─────────────────────────
       Hauteur de la topbar, utilisée par les `th` collants pour se
       positionner JUSTE EN DESSOUS de la topbar (pattern Pennylane).
       Largeur de la sidebar gauche persistante. */
    --header-h:        56px;   /* topbar height (desktop & mobile) */
    --sidebar-w:       240px;  /* sidebar width (desktop only) */
}