/* =========================================================================
   DESIGN TOKENS — Sprint 3 (audit GED 2026-05-05)
   Systeme formalise de variables CSS reutilisables : couleurs, elevations,
   espacements, typographie, animations, breakpoints, layers.
   - 100% additif : ne modifie aucune variable existante (--primary, --text...)
   - Coexiste avec main.css : les nouveaux composants Sprint 3 utilisent ces
     tokens, l'existant continue de fonctionner avec ses propres variables
   - Source d'inspiration : Linear / Notion / Vercel design systems
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     PALETTE BRAND ENRICHIE (gardes les --primary existants intacts)
     ----------------------------------------------------------------------- */
  /* Primary — bleu WTMF, 11 nuances (style Tailwind/Radix) */
  --gd-blue-50:  #eff6ff;
  --gd-blue-100: #dbeafe;
  --gd-blue-200: #bfdbfe;
  --gd-blue-300: #93c5fd;
  --gd-blue-400: #60a5fa;
  --gd-blue-500: #3b82f6;
  --gd-blue-600: #2563eb;  /* = --primary */
  --gd-blue-700: #1d4ed8;
  --gd-blue-800: #1e40af;
  --gd-blue-900: #1e3a8a;
  --gd-blue-950: #172554;

  /* Slate (neutres) */
  --gd-slate-50:  #f8fafc;
  --gd-slate-100: #f1f5f9;
  --gd-slate-200: #e2e8f0;
  --gd-slate-300: #cbd5e1;
  --gd-slate-400: #94a3b8;
  --gd-slate-500: #64748b;
  --gd-slate-600: #475569;
  --gd-slate-700: #334155;
  --gd-slate-800: #1e293b;
  --gd-slate-900: #0f172a;
  --gd-slate-950: #020617;

  /* Accent (orange — couleur secondaire WTMF, deja utilisee dans accent) */
  --gd-amber-100: #fef3c7;
  --gd-amber-200: #fde68a;
  --gd-amber-400: #fbbf24;
  --gd-amber-500: #f59e0b;  /* = --accent */
  --gd-amber-600: #d97706;
  --gd-amber-700: #b45309;

  /* Semantic */
  --gd-red-100: #fee2e2;
  --gd-red-500: #ef4444;
  --gd-red-600: #dc2626;
  --gd-red-700: #b91c1c;

  --gd-green-100: #d1fae5;
  --gd-green-500: #10b981;
  --gd-green-600: #059669;
  --gd-green-700: #047857;

  --gd-violet-100: #e0e7ff;
  --gd-violet-500: #6366f1;
  --gd-violet-600: #4f46e5;
  --gd-violet-700: #4338ca;

  /* -----------------------------------------------------------------------
     ELEVATIONS — 5 niveaux (style Material 3 / Tailwind)
     ----------------------------------------------------------------------- */
  --gd-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --gd-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
  --gd-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -1px rgba(15, 23, 42, .04);
  --gd-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .10), 0 4px 6px -2px rgba(15, 23, 42, .05);
  --gd-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, .12), 0 10px 10px -5px rgba(15, 23, 42, .04);
  --gd-shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, .25);
  --gd-shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, .06);

  /* Glow primary (focus, accent ring) */
  --gd-glow-primary: 0 0 0 3px rgba(37, 99, 235, .25);
  --gd-glow-success: 0 0 0 3px rgba(16, 185, 129, .25);
  --gd-glow-danger:  0 0 0 3px rgba(239, 68, 68, .25);

  /* -----------------------------------------------------------------------
     ESPACEMENTS — echelle 4px (style Tailwind)
     ----------------------------------------------------------------------- */
  --gd-space-0:  0;
  --gd-space-1:  4px;
  --gd-space-2:  8px;
  --gd-space-3:  12px;
  --gd-space-4:  16px;
  --gd-space-5:  20px;
  --gd-space-6:  24px;
  --gd-space-8:  32px;
  --gd-space-10: 40px;
  --gd-space-12: 48px;
  --gd-space-16: 64px;
  --gd-space-20: 80px;
  --gd-space-24: 96px;

  /* -----------------------------------------------------------------------
     RADIUS — echelle progressive
     ----------------------------------------------------------------------- */
  --gd-radius-sm:   4px;
  --gd-radius-md:   6px;
  --gd-radius-lg:   8px;
  --gd-radius-xl:   12px;
  --gd-radius-2xl:  16px;
  --gd-radius-3xl:  24px;
  --gd-radius-full: 9999px;

  /* -----------------------------------------------------------------------
     TYPOGRAPHIE — echelle modulaire (1.125 minor third)
     ----------------------------------------------------------------------- */
  --gd-text-xs:   .72rem;   /* 11.5px */
  --gd-text-sm:   .82rem;   /* 13px */
  --gd-text-base: .95rem;   /* 15.2px */
  --gd-text-lg:   1.06rem;  /* 17px */
  --gd-text-xl:   1.20rem;  /* 19px */
  --gd-text-2xl:  1.40rem;  /* 22px */
  --gd-text-3xl:  1.75rem;  /* 28px */
  --gd-text-4xl:  2.20rem;  /* 35px */
  --gd-text-5xl:  3.00rem;  /* 48px */

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

  --gd-leading-tight:   1.20;
  --gd-leading-snug:    1.35;
  --gd-leading-normal:  1.50;
  --gd-leading-relaxed: 1.65;

  --gd-tracking-tight:  -0.025em;
  --gd-tracking-normal: 0;
  --gd-tracking-wide:   0.05em;
  --gd-tracking-widest: 0.15em;

  /* -----------------------------------------------------------------------
     ANIMATIONS — durees + easings standardises
     ----------------------------------------------------------------------- */
  --gd-duration-instant: 80ms;
  --gd-duration-fast:    150ms;
  --gd-duration-normal:  220ms;
  --gd-duration-slow:    320ms;
  --gd-duration-slower:  500ms;

  --gd-ease-linear:     linear;
  --gd-ease-in:         cubic-bezier(.4, 0, 1, 1);
  --gd-ease-out:        cubic-bezier(0, 0, .2, 1);
  --gd-ease-in-out:     cubic-bezier(.4, 0, .2, 1);
  --gd-ease-bounce:     cubic-bezier(.68, -.55, .27, 1.55);
  --gd-ease-emphasized: cubic-bezier(.2, 0, 0, 1);

  /* -----------------------------------------------------------------------
     BREAKPOINTS (utilises en JS, et reference doc)
     CSS native ne supporte pas les variables dans @media — ces valeurs
     sont la pour reference + scripts JS qui veulent matcher.
     ----------------------------------------------------------------------- */
  --gd-bp-sm:  640px;
  --gd-bp-md:  768px;
  --gd-bp-lg:  1024px;
  --gd-bp-xl:  1280px;
  --gd-bp-2xl: 1536px;

  /* -----------------------------------------------------------------------
     LAYERS (z-index) — empile clairement les couches UI
     ----------------------------------------------------------------------- */
  --gd-z-base:        0;
  --gd-z-dropdown:    1000;
  --gd-z-sticky:      1100;
  --gd-z-banner:      1200;
  --gd-z-overlay:     8000;
  --gd-z-modal:       9000;
  --gd-z-popover:     9500;
  --gd-z-toast:       11000;
  --gd-z-tooltip:     12000;
  --gd-z-max:         99999;

  /* -----------------------------------------------------------------------
     CONTENT WIDTHS / GUTTERS
     ----------------------------------------------------------------------- */
  --gd-content-narrow: 640px;
  --gd-content-normal: 1024px;
  --gd-content-wide:   1280px;
  --gd-content-prose:  72ch;
}

/* -----------------------------------------------------------------------
   DARK MODE — overrides cibles pour tokens contextuels
   (les tokens "raw" comme --gd-blue-600 ne changent jamais)
   ----------------------------------------------------------------------- */
[data-theme="dark"] {
  --gd-shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
  --gd-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
  --gd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .40), 0 2px 4px -1px rgba(0, 0, 0, .30);
  --gd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .45), 0 4px 6px -2px rgba(0, 0, 0, .35);
  --gd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .50), 0 10px 10px -5px rgba(0, 0, 0, .40);
  --gd-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .60);
}

/* -----------------------------------------------------------------------
   UTILITY CLASSES — petite couche utilitaire pour reuse rapide
   ----------------------------------------------------------------------- */
.gd-stack    { display: flex; flex-direction: column; }
.gd-row      { display: flex; flex-direction: row; }
.gd-center   { display: flex; align-items: center; justify-content: center; }
.gd-spread   { display: flex; align-items: center; justify-content: space-between; }
.gd-wrap     { flex-wrap: wrap; }
.gd-grow     { flex: 1; min-width: 0; }
.gd-shrink-0 { flex-shrink: 0; }

.gd-gap-1 { gap: var(--gd-space-1); }
.gd-gap-2 { gap: var(--gd-space-2); }
.gd-gap-3 { gap: var(--gd-space-3); }
.gd-gap-4 { gap: var(--gd-space-4); }
.gd-gap-6 { gap: var(--gd-space-6); }

.gd-text-xs   { font-size: var(--gd-text-xs); }
.gd-text-sm   { font-size: var(--gd-text-sm); }
.gd-text-base { font-size: var(--gd-text-base); }
.gd-text-lg   { font-size: var(--gd-text-lg); }
.gd-text-xl   { font-size: var(--gd-text-xl); }

.gd-font-medium    { font-weight: var(--gd-font-weight-medium); }
.gd-font-semibold  { font-weight: var(--gd-font-weight-semibold); }
.gd-font-bold      { font-weight: var(--gd-font-weight-bold); }
.gd-font-extrabold { font-weight: var(--gd-font-weight-extrabold); }

.gd-text-muted   { color: var(--gd-slate-500); }
.gd-text-strong  { color: var(--gd-slate-900); }
.gd-text-primary { color: var(--gd-blue-600); }
.gd-text-success { color: var(--gd-green-600); }
.gd-text-danger  { color: var(--gd-red-600); }

[data-theme="dark"] .gd-text-strong { color: var(--gd-slate-50); }
[data-theme="dark"] .gd-text-muted  { color: var(--gd-slate-400); }

.gd-rounded-sm  { border-radius: var(--gd-radius-sm); }
.gd-rounded-md  { border-radius: var(--gd-radius-md); }
.gd-rounded-lg  { border-radius: var(--gd-radius-lg); }
.gd-rounded-xl  { border-radius: var(--gd-radius-xl); }
.gd-rounded-2xl { border-radius: var(--gd-radius-2xl); }
.gd-rounded-full{ border-radius: var(--gd-radius-full); }

.gd-shadow-sm { box-shadow: var(--gd-shadow-sm); }
.gd-shadow-md { box-shadow: var(--gd-shadow-md); }
.gd-shadow-lg { box-shadow: var(--gd-shadow-lg); }
.gd-shadow-xl { box-shadow: var(--gd-shadow-xl); }

.gd-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gd-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gd-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gd-duration-instant: 0ms;
    --gd-duration-fast:    0ms;
    --gd-duration-normal:  0ms;
    --gd-duration-slow:    0ms;
    --gd-duration-slower:  0ms;
  }
}