/* ============================================================
   ADrard — Design Tokens (système officiel)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Palette Primaire (Bleu) ── */
  --primary-50:  #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;

  /* ── Palette Accent (Lime/Jaune) ── */
  --accent-50:   #f7fee7;
  --accent-100:  #ecfccb;
  --accent-base: #D0FF03;
  --accent-500:  #b8e600;
  --accent-600:  #a3cc00;

  /* ── Palette Neutre ── */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  /* ── Couleurs Sémantiques ── */
  --success-50:  #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --warning-500: #f59e0b;
  --error-500:   #ef4444;
  --error-600:   #dc2626;

  /* ── Typographie ── */
  --font-family-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs:   clamp(0.7rem,  0.65rem + 0.25vw, 0.75rem);
  --font-size-sm:   clamp(0.8rem,  0.75rem + 0.25vw, 0.875rem);
  --font-size-base: clamp(0.9rem,  0.85rem + 0.25vw, 1rem);
  --font-size-md:   clamp(1rem,    0.95rem + 0.4vw,  1.125rem);
  --font-size-lg:   clamp(1.125rem,1rem    + 0.6vw,  1.25rem);
  --font-size-xl:   clamp(1.25rem, 1.1rem  + 0.8vw,  1.5rem);
  --font-size-2xl:  clamp(1.5rem,  1.3rem  + 1vw,    2rem);
  --font-size-3xl:  clamp(2rem,    1.7rem  + 1.5vw,  2.75rem);
  --font-size-4xl:  clamp(2.5rem,  2rem    + 2.5vw,  4rem);

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:   1.2;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;

  /* ── Espacement ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Rayon (Border Radius) ── */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Tokens Sémantiques (surfaces & texte) ── */
  --color-bg-primary:    var(--neutral-50);
  --color-bg-secondary:  var(--neutral-100);
  --color-surface:       var(--neutral-0);
  --color-surface-hover: var(--neutral-50);

  --color-text-primary:   var(--neutral-950);
  --color-text-secondary: var(--neutral-600);
  --color-text-tertiary:  var(--neutral-500);
  --color-text-muted:     var(--neutral-400);
  --color-text-inverse:   var(--neutral-0);

  --color-accent:       var(--accent-base);
  --color-accent-hover: var(--accent-500);

  --color-border:       var(--neutral-200);
  --color-border-hover: var(--neutral-300);

  --color-success: var(--success-500);
  --color-warning: var(--warning-500);
  --color-error:   var(--error-500);

  /* ── Transitions ── */
  --transition-fast: all 0.15s cubic-bezier(0.4,0,0.2,1);
  --transition-base: all 0.3s  cubic-bezier(0.4,0,0.2,1);
  --transition-slow: all 0.5s  cubic-bezier(0.4,0,0.2,1);

  /* ══════════════════════════════════════════════════════════
     ALIASES — compatibilité avec les composants existants
     ══════════════════════════════════════════════════════════ */

  /* Police */
  --font-sans: var(--font-family-base);
  --font-mono: 'JetBrains Mono', monospace;

  /* Bleu (anciens noms) */
  --blue-50:  var(--primary-50);  --blue-100: var(--primary-100);
  --blue-200: var(--primary-200); --blue-300: var(--primary-300);
  --blue-400: var(--primary-400); --blue-500: var(--primary-500);
  --blue-600: var(--primary-600); --blue-700: var(--primary-700);
  --blue-800: var(--primary-800); --blue-900: var(--primary-900);
  --blue-950: var(--primary-950);

  /* Slate → Neutral */
  --slate-50: var(--neutral-50);   --slate-100: var(--neutral-100);
  --slate-200: var(--neutral-200); --slate-300: var(--neutral-300);
  --slate-400: var(--neutral-400); --slate-500: var(--neutral-500);
  --slate-600: var(--neutral-600); --slate-700: var(--neutral-700);
  --slate-800: var(--neutral-800); --slate-900: var(--neutral-900);
  --slate-950: var(--neutral-950);

  /* Green */
  --green-50:  var(--success-50);  --green-100: var(--success-100);
  --green-500: var(--success-500); --green-600: var(--success-600);
  --green-700: var(--success-700);

  /* Amber / Red */
  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-500: #f59e0b;
  --amber-600: #d97706; --amber-700: #b45309;
  --red-50:   #fef2f2; --red-100:   #fee2e2; --red-500: var(--error-500);
  --red-600:  var(--error-600); --red-700: #b91c1c;

  /* Surfaces */
  --bg-base:   var(--color-surface);
  --bg-1:      var(--color-surface);
  --bg-subtle: var(--color-bg-primary);
  --bg-muted:  var(--color-bg-secondary);
  --surface-1: var(--color-surface);
  --surface-2: var(--color-bg-primary);
  --surface-3: var(--color-bg-secondary);

  /* Couleur primaire (nom court) */
  --primary:        var(--primary-600);
  --primary-hover:  var(--primary-700);
  --primary-active: var(--primary-800);
  --primary-light:  var(--primary-50);
  --primary-ring:   rgba(37,99,235,0.25);
  --primary-fg:     #ffffff;

  /* Texte (anciens noms) */
  --text-1:        var(--color-text-primary);
  --text-2:        var(--color-text-secondary);
  --text-3:        var(--color-text-muted);
  --text-disabled: var(--neutral-300);
  --text-inverse:  var(--color-text-inverse);
  --text-link:     var(--primary-600);

  /* Bordures */
  --border-1:     var(--color-border);
  --border-2:     var(--color-border-hover);
  --border-focus: var(--primary-500);

  /* Alertes */
  --success-bg: var(--success-50);   --success-border: var(--success-100); --success-text: var(--success-700); --success-icon: var(--success-500);
  --warning-bg: #fffbeb;             --warning-border: #fef3c7;            --warning-text: #b45309;            --warning-icon: var(--warning-500);
  --danger-bg:  #fef2f2;             --danger-border:  #fee2e2;            --danger-text:  #b91c1c;            --danger-icon:  var(--error-500);
  --info-bg:    var(--primary-50);   --info-border:    var(--primary-100); --info-text:    var(--primary-700); --info-icon:    var(--primary-500);

  /* Radius (anciens noms) */
  --r-xs:   var(--radius-sm);
  --r-sm:   6px;
  --r-md:   var(--radius-base);
  --r-lg:   var(--radius-md);
  --r-xl:   var(--radius-lg);
  --r-full: var(--radius-full);

  /* Espacement (anciens noms --sp-*) */
  --sp-1:  var(--space-1);  --sp-2:  var(--space-2);
  --sp-3:  var(--space-3);  --sp-4:  var(--space-4);
  --sp-5:  var(--space-5);  --sp-6:  var(--space-6);
  --sp-7:  var(--space-7);  --sp-8:  var(--space-8);
  --sp-10: var(--space-10); --sp-12: var(--space-12);
  --sp-16: var(--space-16);

  /* Typo (anciens noms --text-*) */
  --text-xs:   var(--font-size-xs);
  --text-sm:   var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-md:   var(--font-size-md);
  --text-lg:   var(--font-size-lg);
  --text-xl:   var(--font-size-xl);
  --text-2xl:  var(--font-size-2xl);
  --text-3xl:  var(--font-size-3xl);
  --text-4xl:  var(--font-size-4xl);

  /* Poids (anciens noms --w-*) */
  --w-light:     var(--font-weight-normal);
  --w-normal:    var(--font-weight-normal);
  --w-medium:    var(--font-weight-medium);
  --w-semibold:  var(--font-weight-semibold);
  --w-bold:      var(--font-weight-bold);
  --w-extrabold: var(--font-weight-extrabold);

  /* Ombres */
  --shadow-xs : 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm : 0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow-md : 0 4px 6px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04);
  --shadow-lg : 0 10px 15px rgba(15,23,42,.08),0 4px 6px rgba(15,23,42,.04);
  --shadow-xl : 0 20px 25px rgba(15,23,42,.1),0 8px 10px rgba(15,23,42,.04);
  --shadow-focus: 0 0 0 3px var(--primary-ring);

  /* Transitions (anciens noms) */
  --t-fast: var(--transition-fast);
  --t-base: var(--transition-base);
  --t-slow: var(--transition-slow);

  /* Layout */
  --sidebar-w : 240px;
  --navbar-h  : 56px;

  /* Z-index */
  --z-drop:100; --z-dropdown:100; --z-sticky:200; --z-overlay:300; --z-modal:400; --z-toast:500;

  /* Overlay */
  --bg-overlay: rgba(15,23,42,0.5);
}

/* ── Mode sombre ── */
[data-theme="dark"] {
  --color-bg-primary:    var(--neutral-900);
  --color-bg-secondary:  var(--neutral-800);
  --color-surface:       var(--neutral-950);
  --color-surface-hover: var(--neutral-900);
  --color-text-primary:  var(--neutral-50);
  --color-text-secondary:var(--neutral-400);
  --color-text-tertiary: var(--neutral-500);
  --color-text-muted:    var(--neutral-600);
  --color-border:        var(--neutral-800);
  --color-border-hover:  var(--neutral-700);

  --primary:       var(--primary-500);
  --primary-hover: var(--primary-400);
  --primary-light: rgba(59,130,246,.12);
  --primary-ring:  rgba(59,130,246,.35);

  --bg-base:   var(--neutral-950);
  --bg-1:      var(--neutral-900);
  --bg-subtle: var(--neutral-900);
  --bg-muted:  var(--neutral-800);
  --surface-1: var(--neutral-900);
  --surface-2: var(--neutral-800);
  --surface-3: var(--neutral-700);
  --text-1:    var(--neutral-50);
  --text-2:    var(--neutral-400);
  --text-3:    var(--neutral-600);
  --border-1:  var(--neutral-800);
  --border-2:  var(--neutral-700);
  --text-link: var(--primary-400);

  --success-bg: rgba(34,197,94,.08);  --success-border: rgba(34,197,94,.2);  --success-text: var(--success-500);
  --warning-bg: rgba(245,158,11,.08); --warning-border: rgba(245,158,11,.2); --warning-text: #f59e0b;
  --danger-bg:  rgba(239,68,68,.08);  --danger-border:  rgba(239,68,68,.2);  --danger-text:  var(--error-500);
  --info-bg:    rgba(59,130,246,.08); --info-border:    rgba(59,130,246,.2); --info-text:    var(--primary-400);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.4);
}