/* 
   ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM 2026 — CORE FOUNDATIONS
   ═══════════════════════════════════════════════════════════════
   Les tokens --ds-* sont des ALIAS vers les --dt-* canoniques
   (définis dans design-tokens.css V2).
   
   ⚠️ Source de vérité UNIQUE = design-tokens.css
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── 1. PALETTE — Pontées vers design-tokens.css V2 ── */

    /* Backgrounds */
    --ds-body-bg: var(--dt-bg-body, #f5f8fa);
    --ds-surface: var(--dt-bg-surface, #ffffff);
    --ds-surface-alt: var(--dt-bg-surface-alt, #f1f1f2);

    /* Sidebar / Navigation */
    --ds-sidebar-bg: var(--dt-sidebar-bg, #171717);
    --ds-sidebar-hover: var(--dt-sidebar-hover, #252525);
    --ds-sidebar-active: var(--dt-sidebar-active, #111111);
    --ds-sidebar-text: var(--dt-sidebar-text, #8e8e8e);
    --ds-sidebar-text-active: var(--dt-sidebar-text-active, #ffffff);

    /* Text Colors */
    --ds-text-title: var(--dt-text-title, #181c32);
    --ds-text-body: var(--dt-text-primary, #3f4254);
    --ds-text-muted: var(--dt-text-secondary, #7e8299);
    --ds-text-disabled: var(--dt-text-disabled, #b5b5c3);
    --ds-text-invert: var(--dt-text-inverse, #ffffff);

    /* Brand Colors */
    --ds-brand: var(--dt-brand, #10b981);
    --ds-brand-hover: var(--dt-brand-hover, #059669);
    --ds-brand-light: var(--dt-brand-light, #ecfdf5);
    --ds-brand-text: var(--dt-brand-text, #ffffff);

    /* Functional Colors */
    --ds-primary: var(--dt-brand, #10b981);
    --ds-primary-light: var(--dt-brand-light, #ecfdf5);

    --ds-success: var(--dt-success, #50cd89);
    --ds-success-light: var(--dt-success-light, #e8fff3);

    --ds-warning: var(--dt-warning, #ffc700);
    --ds-warning-light: var(--dt-warning-light, #fff8dd);

    --ds-danger: var(--dt-danger, #f1416c);
    --ds-danger-light: var(--dt-danger-light, #fff5f8);

    --ds-info: var(--dt-info, #7239ea);
    --ds-info-light: var(--dt-info-light, #f8f5ff);

    /* Borders & Dividers */
    --ds-border: var(--dt-border, #e4e6ef);
    --ds-border-input: var(--dt-border-input, #e4e6ef);
    --ds-border-focus: var(--dt-border-focus, #8e8e8e);

    /* ── 2. TYPOGRAPHIE ── */
    --ds-font-family: var(--dt-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);

    /* Tailles */
    --ds-text-xs: var(--dt-text-xs, 0.75rem);
    --ds-text-sm: var(--dt-text-sm, 0.85rem);
    --ds-text-base: var(--dt-text-base, 0.95rem);
    --ds-text-lg: var(--dt-text-lg, 1.1rem);
    --ds-text-xl: var(--dt-text-xl, 1.25rem);
    --ds-text-2xl: var(--dt-text-2xl, 1.5rem);
    --ds-text-3xl: var(--dt-text-3xl, 1.75rem);

    /* Poids */
    --ds-font-normal: var(--dt-font-normal, 400);
    --ds-font-medium: var(--dt-font-medium, 500);
    --ds-font-semibold: var(--dt-font-semibold, 600);
    --ds-font-bold: var(--dt-font-bold, 700);

    /* ── 3. SHAPES & EFFECTS ── */

    /* Radius */
    --ds-radius-sm: var(--dt-radius-xs, 0.25rem);
    --ds-radius-md: var(--dt-radius-md, 0.5rem);
    --ds-radius-lg: var(--dt-radius-md, 0.5rem);
    --ds-radius-xl: var(--dt-radius-md, 0.5rem);
    --ds-radius-pill: var(--dt-radius-pill, 50rem);

    /* Shadows */
    --ds-shadow-sm: var(--dt-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    --ds-shadow-card: var(--dt-shadow-card, 0px 0px 20px 0px rgba(76, 87, 125, 0.02));
    --ds-shadow-lg: var(--dt-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
    --ds-shadow-modal: var(--dt-shadow-modal, 0px 0px 50px 0px rgba(82, 63, 105, 0.15));

    /* Transitions */
    --ds-transition: all var(--motion-normal, 0.2s) ease-in-out;

    /* ── 4. ALIAS UNIVERSELS (Backend + Frontend + Pro) ──
       Source de vérité UNIQUE pour tout le projet.
       Tous les CSS (admin, user, pro) DOIVENT consommer ces alias
       au lieu de re-déclarer les valeurs en dur.
       ─────────────────────────────────────────────────── */

    /* Typographie */
    --font-sans: var(--ds-font-family);
    --text-base: var(--ds-text-base);
    /* 0.95rem — 15.2px */
    --text-xs: var(--ds-text-xs);
    /* 0.75rem — 12px */
    --text-sm: var(--ds-text-sm);
    /* 0.85rem — 13.6px */
    --text-lg: var(--ds-text-lg);
    /* 1.1rem  — 17.6px */
    --text-xl: var(--ds-text-xl);
    /* 1.25rem — 20px */
    --text-2xl: var(--ds-text-2xl);
    /* 1.5rem  — 24px */
    --text-3xl: var(--ds-text-3xl);
    /* 1.75rem — 28px */

    /* Couleurs de texte */
    --text-main: var(--ds-text-title);
    /* #181c32 — Titres & corps */
    --text-secondary: var(--ds-text-body);
    /* #3f4254 — Texte standard */
    --text-muted: var(--ds-text-muted);
    /* #7e8299 — Métadonnées */
    --text-inverse: var(--ds-text-invert);
    /* #ffffff — Sur fond sombre */

    /* Surfaces & Backgrounds */
    --bg-body: var(--ds-body-bg);
    /* #f5f8fa */
    --bg-surface: var(--ds-surface);
    /* #ffffff */
    --bg-surface-alt: var(--ds-surface-alt);
    /* #f1f1f2 */

    /* Brand & Couleurs fonctionnelles */
    --brand-primary: var(--ds-brand);
    /* #10b981 — Vert Logo */
    --brand-primary-dark: var(--ds-brand-hover);
    /* #059669 */
    --brand-primary-light: var(--ds-brand-light);
    /* #ecfdf5 */
    --brand-gradient: linear-gradient(135deg, var(--ds-brand) 0%, var(--ds-brand-hover) 100%);

    --color-success: var(--ds-success);
    /* #50cd89 */
    --color-warning: var(--ds-warning);
    /* #ffc700 */
    --color-danger: var(--ds-danger);
    /* #f1416c */
    --color-info: var(--ds-info);
    /* #7239ea */
    --color-blue: #3b82f6;
    --color-purple: #8b5cf6;
    --color-pink: #ec4899;
    --color-amber: #f59e0b;

    /* Bordures */
    --border-light: var(--ds-border);
    /* #e4e6ef */
    --border-input: var(--ds-border-input);
    /* #e4e6ef */

    /* Radius (Standard unique 8px) */
    --radius-sm: var(--ds-radius-sm);
    /* 4px */
    --radius-md: var(--ds-radius-md);
    /* 8px — Standard cards */
    --radius-lg: var(--ds-radius-lg);
    /* 8px */
    --radius-xl: var(--ds-radius-xl);
    /* 8px */
    --radius-pill: var(--ds-radius-pill);
    /* 50rem — Arrondi complet */

    /* Ombres */
    --shadow-sm: var(--ds-shadow-sm);
    --shadow-md: var(--ds-shadow-card);
    --shadow-lg: var(--ds-shadow-lg);

    /* Layout */
    --header-height: 70px;
    --content-max-width: 2048px;
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--ds-body-bg);
    color: var(--ds-text-body);
    font-family: var(--ds-font-family);
    font-size: var(--ds-text-base);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Liens */
a {
    color: var(--ds-primary);
    text-decoration: none;
    transition: var(--ds-transition);
    cursor: pointer;
}

a:hover {
    color: var(--ds-brand-hover);
}

/* Titres */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ds-text-title);
    font-weight: var(--ds-font-semibold);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITAIRES ATOMIQUES (Pour éviter les styles inline)
   ═══════════════════════════════════════════════════════════════ */

/* Text Colors */
.text-title {
    color: var(--ds-text-title) !important;
}

.text-body {
    color: var(--ds-text-body) !important;
}

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

.text-success {
    color: var(--ds-success) !important;
}

.text-danger {
    color: var(--ds-danger) !important;
}

.text-primary {
    color: var(--ds-primary) !important;
}

.text-warning {
    color: var(--ds-warning) !important;
}

.text-white {
    color: white !important;
}

/* Font Weights */
.fw-normal {
    font-weight: var(--ds-font-normal) !important;
}

.fw-medium {
    font-weight: var(--ds-font-medium) !important;
}

.fw-bold {
    font-weight: var(--ds-font-semibold) !important;
    /* Préférence à semibold pour le moderne */
}

.fw-bolder {
    font-weight: var(--ds-font-bold) !important;
}

/* Backgrounds */
.bg-white {
    background-color: var(--ds-surface) !important;
}

.bg-light {
    background-color: var(--ds-body-bg) !important;
}

.bg-success-light {
    background-color: var(--ds-success-light) !important;
}

.bg-danger-light {
    background-color: var(--ds-danger-light) !important;
}

.bg-warning-light {
    background-color: var(--ds-warning-light) !important;
}

.bg-primary-light {
    background-color: var(--ds-primary-light) !important;
}

/* Display & Flex (Base minimisée) */
.d-flex {
    display: flex !important;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

.gap-4 {
    gap: 1.5rem;
}

/* Spacings (Compatible Bootstrap-like) */
.m-0 {
    margin: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 0.75rem !important;
}

.mb-4 {
    margin-bottom: 1rem !important;
}

.mb-5 {
    margin-bottom: 1.5rem !important;
}

.mt-3 {
    margin-top: 0.75rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.p-0 {
    padding: 0 !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 0.75rem !important;
}

.p-4 {
    padding: 1rem !important;
}

.p-card {
    padding: 2rem 2.25rem !important;
}

/* Padding généreux des cards */

/* Radius & Shadow */
.rounded-sm {
    border-radius: var(--ds-radius-sm) !important;
}

.rounded-md {
    border-radius: var(--ds-radius-md) !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

.shadow-sm {
    box-shadow: var(--ds-shadow-sm) !important;
}

.shadow-card {
    box-shadow: var(--ds-shadow-card) !important;
}

/* Curseurs */
.cursor-pointer {
    cursor: pointer;
}