/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS v2.0 — Source Unique de Vérité
   ═══════════════════════════════════════════════════════════════
   
   🎯 OBJECTIF : 
   CE FICHIER EST L'UNIQUE AUTORITÉ VISUELLE DE LA PLATEFORME.
   
   Tout composant, toute page, tout module DOIT utiliser ces tokens.
   Aucun style hardcodé ne doit contredire ces valeurs.
   
   📦 PÉRIMÈTRE :
   - Admin, User, Pro, Frontend, Plugins, Extensions
   - Light mode + Dark mode
   - Desktop + Tablet + Mobile
   
   🔗 HIÉRARCHIE CSS :
   1. design-tokens.css    ← CE FICHIER (Tokens + Dark override)
   2. design-system.css    ← Reset + Utilitaires atomiques
   3. admin-unified.css    ← Composants admin (au-*)
   4. [page].css           ← CSS spécifique à la page
   
   ⚠️  RÈGLE ABSOLUE :
   Jamais de couleur hardcodée (#xxx) dans les composants.
   Toujours var(--dt-*).
   
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. PALETTE SÉMANTIQUE — LIGHT MODE (Défaut)
   ═══════════════════════════════════════════════════════════════ */

:root {

   /* ═══════════════════════════════════════════════════════════
      V2 CORE COLOR SCALE (fondations immuables)
      ═══════════════════════════════════════════════════════════ */

   /* Neutral scale */
   --color-neutral-0: #ffffff;
   --color-neutral-50: #f8fafc;
   --color-neutral-100: #f1f5f9;
   --color-neutral-200: #e2e8f0;
   --color-neutral-300: #cbd5e1;
   --color-neutral-400: #94a3b8;
   --color-neutral-500: #64748b;
   --color-neutral-600: #475569;
   --color-neutral-700: #334155;
   --color-neutral-800: #1e293b;
   --color-neutral-900: #0f172a;

   /* Brand scale */
   --color-brand-50: #eff6ff;
   --color-brand-100: #dbeafe;
   --color-brand-200: #bfdbfe;
   --color-brand-300: #93c5fd;
   --color-brand-400: #60a5fa;
   --color-brand-500: #3b82f6;
   --color-brand-600: #2563eb;
   --color-brand-700: #1d4ed8;
   --color-brand-800: #1e40af;
   --color-brand-900: #1e3a8a;

   /* Functional core */
   --color-success-500: #10b981;
   --color-success-600: #059669;
   --color-warning-500: #f59e0b;
   --color-warning-600: #d97706;
   --color-danger-500: #ef4444;
   --color-danger-600: #dc2626;
   --color-info-500: #0ea5e9;
   --color-info-600: #0284c7;

   /* ── 1.1 BRAND ─────────────────────────────────────────────── */
   --dt-brand: #10b981;
   --dt-brand-hover: #059669;
   --dt-brand-light: #ecfdf5;
   --dt-brand-text: #ffffff;

   /* ── 1.2 BACKGROUNDS ───────────────────────────────────────── */
   --dt-bg-body: #f9f9f9;
   --dt-bg-surface: #ffffff;
   --dt-bg-surface-alt: #f8fafc;
   --dt-bg-elevated: #ffffff;
   --dt-bg-inset: #f1f5f9;
   --dt-bg-overlay: rgba(0, 0, 0, 0.4);

   /* ── 1.3 TEXTES ────────────────────────────────────────────── */
   --dt-text-title: #0f172a;
   --dt-text-primary: #334155;
   --dt-text-secondary: #64748b;
   --dt-text-tertiary: #94a3b8;
   --dt-text-disabled: #cbd5e1;
   --dt-text-inverse: #ffffff;
   --dt-text-link: #10b981;
   --dt-text-link-hover: #059669;

   /* ── 1.4 BORDURES ──────────────────────────────────────────── */
   --dt-border: #e2e8f0;
   --dt-border-strong: #cbd5e1;
   --dt-border-subtle: #f1f5f9;
   --dt-border-input: #e2e8f0;
   --dt-border-focus: #1a1a1a;

   /* ── 1.5 COULEURS FONCTIONNELLES ───────────────────────────── */

   /* Success */
   --dt-success: #10b981;
   --dt-success-hover: #059669;
   --dt-success-light: rgba(16, 185, 129, 0.08);
   --dt-success-text: #065f46;

   /* Warning */
   --dt-warning: #f59e0b;
   --dt-warning-hover: #d97706;
   --dt-warning-light: rgba(245, 158, 11, 0.08);
   --dt-warning-text: #92400e;

   /* Danger / Error */
   --dt-danger: #ef4444;
   --dt-danger-hover: #dc2626;
   --dt-danger-light: rgba(239, 68, 68, 0.06);
   --dt-danger-text: #991b1b;

   /* Info */
   --dt-info: #3b82f6;
   --dt-info-hover: #2563eb;
   --dt-info-light: rgba(59, 130, 246, 0.06);
   --dt-info-text: #1e40af;

   /* ── 1.6 PRIMAIRE (Actions principales) ────────────────────── */
   --dt-primary: #1a1a1a;
   --dt-primary-hover: #333333;
   --dt-primary-light: rgba(26, 26, 26, 0.04);
   --dt-primary-text: #ffffff;

   /* Secondary */
   --dt-secondary: #64748b;
   --dt-secondary-hover: #475569;
   --dt-secondary-light: rgba(100, 116, 139, 0.08);

   /* Accent */
   --dt-accent: #6366f1;
   --dt-accent-hover: #4f46e5;
   --dt-accent-light: rgba(99, 102, 241, 0.08);


   /* ═══════════════════════════════════════════════════════════
       2. SIDEBAR / NAVIGATION
       ═══════════════════════════════════════════════════════════ */

   --dt-sidebar-bg: #171717;
   --dt-sidebar-hover: #252525;
   --dt-sidebar-active: #111111;
   --dt-sidebar-text: #8e8e8e;
   --dt-sidebar-text-active: #ffffff;
   --dt-sidebar-border: rgba(255, 255, 255, 0.06);
   --dt-sidebar-accent: #10b981;

   /* Header */
   --dt-header-bg: #ffffff;
   --dt-header-border: #e2e8f0;
   --dt-header-text: #0f172a;


   /* ═══════════════════════════════════════════════════════════
       3. TYPOGRAPHIE
       ═══════════════════════════════════════════════════════════ */

   --dt-font-family: 'Inter', -apple-system, BlinkMacSystemFont,
      'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --dt-font-mono: 'SF Mono', 'Consolas', 'Monaco', 'Fira Code', monospace;

   /* Tailles */
   --dt-text-xs: 0.72rem;
   /* 11.5px */
   --dt-text-sm: 0.82rem;
   /* 13.1px */
   --dt-text-base: 0.9rem;
   /* 14.4px */
   --dt-text-md: 0.95rem;
   /* 15.2px */
   --dt-text-lg: 1.1rem;
   /* 17.6px */
   --dt-text-xl: 1.25rem;
   /* 20px */
   --dt-text-2xl: 1.5rem;
   /* 24px */
   --dt-text-3xl: 1.85rem;
   /* 29.6px */

   /* Poids */
   --dt-font-normal: 400;
   --dt-font-medium: 500;
   --dt-font-semibold: 600;
   --dt-font-bold: 700;

   /* Line heights */
   --dt-leading-tight: 1.25;
   --dt-leading-normal: 1.5;
   --dt-leading-relaxed: 1.65;


   /* ═══════════════════════════════════════════════════════════
       4. FORMES & RAYONS
       ═══════════════════════════════════════════════════════════ */

   --dt-radius-xs: 4px;
   --dt-radius-sm: 6px;
   --dt-radius-md: 8px;
   --dt-radius-lg: 10px;
   --dt-radius-xl: 14px;
   --dt-radius-2xl: 16px;
   --dt-radius-pill: 50rem;
   --dt-radius-circle: 50%;


   /* ═══════════════════════════════════════════════════════════
       5. OMBRES & ÉLÉVATION
       ═══════════════════════════════════════════════════════════ */

   --dt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
   --dt-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06),
      0 1px 2px rgba(15, 23, 42, 0.03);
   --dt-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.04),
      0 2px 4px rgba(15, 23, 42, 0.03);
   --dt-shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.06),
      0 4px 6px rgba(15, 23, 42, 0.03);
   --dt-shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.08),
      0 8px 10px rgba(15, 23, 42, 0.03);
   --dt-shadow-modal: 0 25px 50px rgba(15, 23, 42, 0.15);
   --dt-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.12);

   /* Card signature */
   --dt-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08),
      0 4px 6px rgba(15, 23, 42, 0.02);
   --dt-shadow-card-hover: 0 4px 12px rgba(15, 23, 42, 0.1),
      0 2px 4px rgba(15, 23, 42, 0.04);


   /* ═══════════════════════════════════════════════════════════
       6. ESPACEMENTS
       ═══════════════════════════════════════════════════════════ */

   --dt-space-1: 4px;
   --dt-space-2: 8px;
   --dt-space-3: 12px;
   --dt-space-4: 16px;
   --dt-space-5: 20px;
   --dt-space-6: 24px;
   --dt-space-8: 32px;
   --dt-space-10: 40px;
   --dt-space-12: 48px;
   --dt-space-16: 64px;

   /* Content widths */
   --dt-content-max: 1400px;
   --dt-content-narrow: 800px;


   /* ═══════════════════════════════════════════════════════════
       7. TRANSITIONS & ANIMATIONS
       ═══════════════════════════════════════════════════════════ */

   --dt-transition-fast: 0.15s ease;
   --dt-transition-base: 0.2s ease;
   --dt-transition-slow: 0.35s ease;
   --dt-transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

   /* V2 Motion tokens */
   --motion-fast: 160ms;
   --motion-normal: 220ms;
   --motion-slow: 280ms;
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
   --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

   /* Z-index scale */
   --dt-z-dropdown: 100;
   --dt-z-sticky: 200;
   --dt-z-overlay: 300;
   --dt-z-modal: 400;
   --dt-z-toast: 500;
   --dt-z-tooltip: 600;


   /* ═══════════════════════════════════════════════════════════
       8. COMPOSANTS (Tokens spécifiques)
       ═══════════════════════════════════════════════════════════ */

   /* Cards */
   --dt-card-bg: var(--dt-bg-surface);
   --dt-card-border: var(--dt-border);
   --dt-card-radius: var(--dt-radius-lg);
   --dt-card-shadow: var(--dt-shadow-card);
   --dt-card-padding: var(--dt-space-5);

   /* Inputs */
   --dt-input-bg: var(--dt-bg-surface);
   --dt-input-border: var(--dt-border-input);
   --dt-input-radius: var(--dt-radius-md);
   --dt-input-focus-ring: 0 0 0 3px rgba(26, 26, 26, 0.06);
   --dt-input-placeholder: var(--dt-text-tertiary);

   /* Buttons */
   --dt-btn-radius: var(--dt-radius-lg);
   --dt-btn-font-weight: var(--dt-font-semibold);

   /* Badges */
   --dt-badge-radius: var(--dt-radius-sm);

   /* Tables */
   --dt-table-header-bg: var(--dt-bg-inset);
   --dt-table-row-hover: var(--dt-bg-inset);
   --dt-table-border: var(--dt-border);

   /* Modals */
   --dt-modal-bg: var(--dt-bg-elevated);
   --dt-modal-shadow: var(--dt-shadow-modal);
   --dt-modal-radius: var(--dt-radius-xl);

   /* Scrollbar */
   --dt-scrollbar-track: var(--dt-bg-inset);
   --dt-scrollbar-thumb: var(--dt-border-strong);
   --dt-scrollbar-thumb-hover: var(--dt-text-tertiary);


   /* ═══════════════════════════════════════════════════════════
       9b. V2 GRADIENT TOKENS (Premium)
       ═══════════════════════════════════════════════════════════ */

   --gradient-primary: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-600));
   --gradient-success: linear-gradient(135deg, var(--color-success-500), var(--color-success-600));
   --gradient-warning: linear-gradient(135deg, var(--color-warning-500), var(--color-warning-600));
   --gradient-danger: linear-gradient(135deg, var(--color-danger-500), var(--color-danger-600));

   /* V2 Shadow Glow */
   --shadow-glow-primary: 0 0 0 4px rgba(59, 130, 246, 0.15);
   --shadow-glow-success: 0 0 0 4px rgba(16, 185, 129, 0.15);

   /* V2 Responsive tokens */
   --container-max-desktop: 2048px;
   --container-max-xl: 1600px;
   --container-max-lg: 1280px;
   --touch-target-min: 44px;


   /* ═══════════════════════════════════════════════════════════
       9. PLUGIN & EXTENSION TOKENS
       ═══════════════════════════════════════════════════════════
       CSS variables for plugins/extensions/modules to consume.
       Plugins MUST use these tokens, NOT hardcoded values.
       ═══════════════════════════════════════════════════════════ */

   /* ── progression Plugin ────────────────────────────────── */
   --dt-gam-toast-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
   --dt-gam-toast-text: #ffffff;
   --dt-gam-toast-desc: #94a3b8;
   --dt-gam-toast-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
   --dt-gam-badge-bg: rgba(255, 255, 255, 0.06);
   --dt-gam-badge-border: rgba(255, 255, 255, 0.08);
   --dt-gam-badge-text: #e2e8f0;
   --dt-gam-badge-name: #e2e8f0;
   --dt-gam-badge-desc: #94a3b8;
   --dt-gam-card-bg: rgba(255, 255, 255, 0.04);
   --dt-gam-card-border: rgba(255, 255, 255, 0.06);
   --dt-gam-ring-bg: rgba(255, 255, 255, 0.08);
   --dt-gam-points-gradient: linear-gradient(135deg, #f59e0b, #fbbf24);

   /* ── Onboarding / Tour Plugin ───────────────────────────── */
   --dt-tour-overlay: rgba(0, 0, 0, 0.6);
   --dt-tour-tooltip-bg: var(--dt-bg-elevated);
   --dt-tour-tooltip-text: var(--dt-text-primary);
   --dt-tour-tooltip-shadow: var(--dt-shadow-xl);
   --dt-tour-highlight: var(--dt-brand);
   --dt-tour-step-bg: var(--dt-bg-inset);

   /* ── Chart.js Integration ───────────────────────────────── */
   --dt-chart-text: var(--dt-text-primary);
   --dt-chart-text-muted: var(--dt-text-tertiary);
   --dt-chart-grid: rgba(0, 0, 0, 0.06);
   --dt-chart-border: var(--dt-border);
   --dt-chart-surface: var(--dt-bg-surface);

   /* ── Generic Plugin Container ───────────────────────────── */
   --dt-plugin-bg: var(--dt-bg-surface);
   --dt-plugin-border: var(--dt-border);
   --dt-plugin-text: var(--dt-text-primary);
   --dt-plugin-text-muted: var(--dt-text-secondary);
   --dt-plugin-heading: var(--dt-text-title);
   --dt-plugin-link: var(--dt-text-link);
   --dt-plugin-radius: var(--dt-radius-lg);
   --dt-plugin-shadow: var(--dt-shadow-card);

   /* Color scheme indicator */
   color-scheme: light;
}


/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Token override unique
   ═══════════════════════════════════════════════════════════════
   
   🌙 TOUTES les valeurs dark se trouvent ICI.
   Plus AUCUN fichier n'a besoin de [data-theme="dark"] overrides
   de composants : les composants héritent automatiquement.
   
   Palette sombre :
     Body       #0f1117
     Surface    #1a1d27 → #1e2130
     Elevated   #252940
     Border     #2a2e42 → #353a52
     Text       #e4e6f0 → #c8cad8 → #a0a4b8 → #8b8fa3
     Accent     #10b981 (menthe — identique)
   
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {

   /* ── BACKGROUNDS ────────────────────────────────────────── */
   --dt-bg-body: #0f1117;
   --dt-bg-surface: #1a1d27;
   --dt-bg-surface-alt: #1e2130;
   --dt-bg-elevated: #252940;
   --dt-bg-inset: #1e2130;
   --dt-bg-overlay: rgba(0, 0, 0, 0.6);

   /* ── TEXTES ─────────────────────────────────────────────── */
   --dt-text-title: #e4e6f0;
   --dt-text-primary: #c8cad8;
   --dt-text-secondary: #a0a4b8;
   --dt-text-tertiary: #8b8fa3;
   --dt-text-disabled: #555873;
   --dt-text-inverse: #0f1117;
   --dt-text-link: #34d496;
   --dt-text-link-hover: #5ddda8;

   /* ── BORDURES ───────────────────────────────────────────── */
   --dt-border: #2a2e42;
   --dt-border-strong: #353a52;
   --dt-border-subtle: #22263a;
   --dt-border-input: #353a52;
   --dt-border-focus: #10b981;

   /* ── COULEURS FONCTIONNELLES ─────────────────────────── */
   --dt-success: #10b981;
   --dt-success-hover: #34d496;
   --dt-success-light: rgba(16, 185, 129, 0.1);
   --dt-success-text: #6ee7b7;

   --dt-warning: #f0a040;
   --dt-warning-hover: #f4b85e;
   --dt-warning-light: rgba(240, 160, 64, 0.1);
   --dt-warning-text: #fcd34d;

   --dt-danger: #f56565;
   --dt-danger-hover: #f88b8b;
   --dt-danger-light: rgba(245, 101, 101, 0.1);
   --dt-danger-text: #fca5a5;

   --dt-info: #60a5fa;
   --dt-info-hover: #93bbfc;
   --dt-info-light: rgba(96, 165, 250, 0.08);
   --dt-info-text: #93c5fd;

   /* ── PRIMAIRE (inversé en dark) ─────────────────────── */
   --dt-primary: #e4e6f0;
   --dt-primary-hover: #ffffff;
   --dt-primary-light: rgba(228, 230, 240, 0.06);
   --dt-primary-text: #0f1117;

   --dt-secondary: #8b8fa3;
   --dt-secondary-hover: #a0a4b8;
   --dt-secondary-light: rgba(139, 143, 163, 0.1);

   --dt-accent: #818cf8;
   --dt-accent-hover: #a5b4fc;
   --dt-accent-light: rgba(129, 140, 248, 0.1);

   /* ── BRAND ─────────────────────────────────────────────── */
   --dt-brand: #10b981;
   --dt-brand-hover: #34d496;
   --dt-brand-light: rgba(43, 196, 138, 0.08);
   --dt-brand-text: #ffffff;

   /* ── SIDEBAR ────────────────────────────────────────────── */
   --dt-sidebar-bg: #0d0f15;
   --dt-sidebar-hover: #1a1d27;
   --dt-sidebar-active: #0a0c12;
   --dt-sidebar-text: #a0a4b8;
   --dt-sidebar-text-active: #ffffff;
   --dt-sidebar-border: #1a1d27;

   /* Header */
   --dt-header-bg: #1a1d27;
   --dt-header-border: #2a2e42;
   --dt-header-text: #e4e6f0;

   /* ── OMBRES (plus profondes) ────────────────────────── */
   --dt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
   --dt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
   --dt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
   --dt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
   --dt-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.35);
   --dt-shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.4);
   --dt-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.35);
   --dt-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
   --dt-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3);

   /* ── COMPOSANTS ─────────────────────────────────────────── */
   --dt-input-bg: #252940;
   --dt-input-focus-ring: 0 0 0 3px rgba(43, 196, 138, 0.12);

   --dt-table-header-bg: #1e2130;
   --dt-table-row-hover: #1e2130;

   --dt-modal-bg: #1e2130;

   --dt-scrollbar-track: #1a1d27;
   --dt-scrollbar-thumb: #353a52;
   --dt-scrollbar-thumb-hover: #3e4360;

   /* ── PLUGIN TOKENS — DARK OVERRIDE ──────────────────── */

   /* progression */
   --dt-gam-toast-bg: linear-gradient(135deg, #1e2130 0%, #252940 100%);
   --dt-gam-toast-desc: #6b7094;
   --dt-gam-toast-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
   --dt-gam-badge-bg: rgba(255, 255, 255, 0.04);
   --dt-gam-badge-border: rgba(255, 255, 255, 0.06);
   --dt-gam-badge-name: #c8cad6;
   --dt-gam-badge-desc: #6b7094;
   --dt-gam-card-bg: rgba(255, 255, 255, 0.03);
   --dt-gam-card-border: #2a2e42;
   --dt-gam-ring-bg: rgba(255, 255, 255, 0.06);

   /* Chart.js */
   --dt-chart-grid: rgba(255, 255, 255, 0.06);

   /* Color scheme hint for browser */
   color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════
   COMPATIBILITY BRIDGE — Mapping des anciens tokens
   ═══════════════════════════════════════════════════════════════
   
   Redirige les anciens var(--ds-*), var(--surface-*), var(--text-*)
   vers les nouveaux var(--dt-*).
   
   ⚠️ TEMPORAIRE — À supprimer progressivement quand tous les
   fichiers CSS seront migrés vers --dt-*.
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {

   /* design-system.css legacy → dt */
   --ds-body-bg: var(--dt-bg-body);
   --ds-surface: var(--dt-bg-surface);
   --ds-surface-alt: var(--dt-bg-surface-alt);
   --ds-sidebar-bg: var(--dt-sidebar-bg);
   --ds-sidebar-hover: var(--dt-sidebar-hover);
   --ds-sidebar-active: var(--dt-sidebar-active);
   --ds-sidebar-text: var(--dt-sidebar-text);
   --ds-sidebar-text-active: var(--dt-sidebar-text-active);
   --ds-text-title: var(--dt-text-title);
   --ds-text-body: var(--dt-text-primary);
   --ds-text-muted: var(--dt-text-secondary);
   --ds-text-disabled: var(--dt-text-disabled);
   --ds-text-invert: var(--dt-text-inverse);
   --ds-brand: var(--dt-brand);
   --ds-brand-hover: var(--dt-brand-hover);
   --ds-brand-light: var(--dt-brand-light);
   --ds-brand-text: var(--dt-brand-text);
   --ds-primary: var(--dt-brand);
   --ds-primary-light: var(--dt-brand-light);
   --ds-success: var(--dt-success);
   --ds-success-light: var(--dt-success-light);
   --ds-warning: var(--dt-warning);
   --ds-warning-light: var(--dt-warning-light);
   --ds-danger: var(--dt-danger);
   --ds-danger-light: var(--dt-danger-light);
   --ds-info: var(--dt-info);
   --ds-info-light: var(--dt-info-light);
   --ds-border: var(--dt-border);
   --ds-border-input: var(--dt-border-input);
   --ds-border-focus: var(--dt-border-focus);
   --ds-font-family: var(--dt-font-family);
   --ds-text-xs: var(--dt-text-xs);
   --ds-text-sm: var(--dt-text-sm);
   --ds-text-base: var(--dt-text-base);
   --ds-text-lg: var(--dt-text-lg);
   --ds-text-xl: var(--dt-text-xl);
   --ds-text-2xl: var(--dt-text-2xl);
   --ds-text-3xl: var(--dt-text-3xl);
   --ds-font-normal: var(--dt-font-normal);
   --ds-font-medium: var(--dt-font-medium);
   --ds-font-semibold: var(--dt-font-semibold);
   --ds-font-bold: var(--dt-font-bold);
   --ds-radius-sm: var(--dt-radius-xs);
   --ds-radius-md: var(--dt-radius-md);
   --ds-radius-lg: var(--dt-radius-md);
   --ds-radius-xl: var(--dt-radius-md);
   --ds-radius-pill: var(--dt-radius-pill);
   --ds-shadow-sm: var(--dt-shadow-sm);
   --ds-shadow-card: var(--dt-shadow-card);
   --ds-shadow-lg: var(--dt-shadow-lg);
   --ds-shadow-modal: var(--dt-shadow-modal);
   --ds-transition: all var(--dt-transition-base);

   /* bite-theme.css legacy → dt */
   --surface-bg: var(--dt-bg-surface);
   --surface-card: var(--dt-bg-surface);
   --surface-card-hover: var(--dt-bg-surface);
   --surface-border: var(--dt-border);
   --surface-inner-border: var(--dt-border-subtle);
   --surface-shadow: var(--dt-shadow-card);
   --surface-radius: var(--dt-radius-md);
   --page-bg: var(--dt-bg-inset);
   --text-title: var(--dt-text-title);
   --text-primary: var(--dt-text-primary);
   --text-secondary: var(--dt-text-secondary);
   --text-tertiary: var(--dt-text-tertiary);
   --text-disabled: var(--dt-text-disabled);

   /* admin-components legacy → dt */
   --admin-primary: var(--dt-primary);
   --admin-primary-dark: var(--dt-primary-hover);
   --admin-primary-light: var(--dt-primary-light);
   --primary-50: var(--dt-bg-inset);
   --primary-100: var(--dt-border);
   --primary-500: var(--dt-primary);
   --primary-600: var(--dt-primary-hover);
   --primary-700: var(--dt-primary-hover);

   /* User dashboard legacy */
   --user-primary: var(--dt-primary);
   --user-primary-dark: var(--dt-primary-hover);
   --user-secondary: var(--dt-brand);

   /* KPI legacy */
   --kpi-card-bg: var(--dt-card-bg);
   --kpi-card-border: var(--dt-card-border);
   --kpi-text-title: var(--dt-text-title);
   --kpi-text-primary: var(--dt-text-primary);

   /* General shorthand */
   --bg-body: var(--dt-bg-body);
   --bg-card: var(--dt-bg-surface);
   --bg-sidebar: var(--dt-sidebar-bg);
   --text-main: var(--dt-text-title);
   --text-muted: var(--dt-text-secondary);
   --text-inverse: var(--dt-text-inverse);
   --border-light: var(--dt-border);
   --border-dark: var(--dt-border-strong);
   --success: var(--dt-success);
   --warning: var(--dt-warning);
   --danger: var(--dt-danger);
   --info: var(--dt-info);

   /* distributor-show / detail legacy → dt */
   --bg: var(--dt-bg-body);
   --bg-soft: var(--dt-bg-inset);
   --bg-hover: var(--dt-bg-surface-alt);
   --surface: var(--dt-bg-surface);
   --bg-surface: var(--dt-bg-surface);
}


/* ═══════════════════════════════════════════════════════════════
   SMOOTH THEME TRANSITION
   ═══════════════════════════════════════════════════════════════ */

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
   transition: background-color 0.35s ease,
      color 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease !important;
}