/* ============================================================
   C'Event — Design Tokens
   Architecture à 3 niveaux (standard Material 3 / Stripe / Linear) :
     1. PRIMITIVES   → valeurs brutes (ne jamais utiliser directement)
     2. SÉMANTIQUES  → intention / rôle (utilisés par les composants)
     3. (composants) → définis dans components.css

   Le thème sombre ne redéfinit QUE la couche sémantique.
   ============================================================ */

/* ---------- 1. PRIMITIVES ---------- */
:root {
  /* Marque — Blue */
  --blue-50:#eff6ff;  --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd;
  --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
  --blue-800:#1e40af; --blue-900:#1e3a8a; --blue-950:#172554;

  /* Accent — Cyan (signal IA / étincelle) */
  --cyan-400:#22d3ee; --cyan-500:#06b6d4; --cyan-600:#0891b2;

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

  /* Statut — Green / Amber / Red */
  --green-50:#ecfdf5; --green-100:#d1fae5; --green-500:#10b981; --green-600:#059669; --green-700:#047857;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;
  --red-50:#fef2f2;   --red-100:#fee2e2;   --red-500:#ef4444;   --red-600:#dc2626;   --red-700:#b91c1c;

  /* Typographie — familles */
  --font-sans:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bebas Neue', 'Outfit', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Geist Mono', 'Courier New', monospace;

  /* Échelle typographique — taille / interligne */
  --text-xs:.75rem;    --leading-xs:1rem;
  --text-sm:.875rem;   --leading-sm:1.25rem;
  --text-base:1rem;    --leading-base:1.5rem;
  --text-lg:1.125rem;  --leading-lg:1.75rem;
  --text-xl:1.25rem;   --leading-xl:1.75rem;
  --text-2xl:1.5rem;   --leading-2xl:2rem;
  --text-3xl:1.875rem; --leading-3xl:2.25rem;
  --text-4xl:2.25rem;  --leading-4xl:2.5rem;
  --text-5xl:3rem;     --leading-5xl:1.1;

  /* Graisses */
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Letter-spacing */
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.05em; --tracking-wider:0.1em;

  /* Espacement — base 4px */
  --space-0:0;      --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem; --space-8:2rem;   --space-10:2.5rem;--space-12:3rem;
  --space-16:4rem;  --space-20:5rem;  --space-24:6rem;

  /* Rayons */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px;--radius-2xl:24px;--radius-full:9999px;

  /* Élévation (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 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:0 12px 24px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05);
  --shadow-xl:0 24px 48px rgba(15,23,42,.14);

  /* Mouvement */
  --ease:cubic-bezier(.4,0,.2,1);
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms;

  /* Layout */
  --container-max:1120px;
}

/* ---------- 2. SÉMANTIQUES — thème clair (défaut) ---------- */
:root, [data-theme="light"] {
  /* Surfaces */
  --color-bg-canvas:var(--slate-100);
  --color-bg-surface:var(--slate-0);
  --color-bg-subtle:var(--slate-50);
  --color-bg-muted:var(--slate-100);
  --color-bg-inverse:var(--slate-900);

  /* Texte */
  --color-text-primary:var(--slate-900);
  --color-text-secondary:var(--slate-600);
  --color-text-muted:var(--slate-500);
  --color-text-inverse:var(--slate-0);
  --color-text-link:var(--blue-600);
  --color-text-on-brand:var(--slate-0);

  /* Bordures */
  --color-border-subtle:var(--slate-200);
  --color-border-default:var(--slate-300);
  --color-border-strong:var(--slate-400);

  /* Marque */
  --color-brand-solid:var(--blue-600);
  --color-brand-solid-hover:var(--blue-700);
  --color-brand-solid-active:var(--blue-800);
  --color-brand-subtle:var(--blue-50);
  --color-brand-subtle-hover:var(--blue-100);
  --color-brand-text:var(--blue-700);
  --color-brand-border:var(--blue-200);

  --color-accent:var(--cyan-500);

  /* Statut */
  --color-success-solid:var(--green-600); --color-success-subtle:var(--green-50); --color-success-text:var(--green-700); --color-success-border:var(--green-100);
  --color-warning-solid:var(--amber-500); --color-warning-subtle:var(--amber-50); --color-warning-text:var(--amber-700); --color-warning-border:var(--amber-100);
  --color-danger-solid:var(--red-600);    --color-danger-solid-hover:var(--red-700); --color-danger-subtle:var(--red-50);    --color-danger-text:var(--red-700);    --color-danger-border:var(--red-100);

  --color-focus-ring:rgba(37,99,235,.35);
  --color-focus-ring-danger:rgba(220,38,38,.35);
  --shadow-card:var(--shadow-sm);
}

/* ---------- Thème sombre — on ne redéfinit QUE les sémantiques ---------- */
[data-theme="dark"] {
  --color-bg-canvas:var(--slate-950);
  --color-bg-surface:var(--slate-900);
  --color-bg-subtle:var(--slate-800);
  --color-bg-muted:var(--slate-800);
  --color-bg-inverse:var(--slate-0);

  --color-text-primary:var(--slate-50);
  --color-text-secondary:var(--slate-300);
  --color-text-muted:var(--slate-400);
  --color-text-inverse:var(--slate-900);
  --color-text-link:var(--blue-400);
  --color-text-on-brand:var(--slate-0);

  --color-border-subtle:var(--slate-800);
  --color-border-default:var(--slate-700);
  --color-border-strong:var(--slate-600);

  --color-brand-solid:var(--blue-500);
  --color-brand-solid-hover:var(--blue-400);
  --color-brand-solid-active:var(--blue-600);
  --color-brand-subtle:rgba(59,130,246,.12);
  --color-brand-subtle-hover:rgba(59,130,246,.20);
  --color-brand-text:var(--blue-300);
  --color-brand-border:rgba(59,130,246,.30);

  --color-accent:var(--cyan-400);

  --color-success-solid:var(--green-500); --color-success-subtle:rgba(16,185,129,.12); --color-success-text:#6ee7b7; --color-success-border:rgba(16,185,129,.25);
  --color-warning-solid:var(--amber-500); --color-warning-subtle:rgba(245,158,11,.12); --color-warning-text:#fcd34d; --color-warning-border:rgba(245,158,11,.25);
  --color-danger-solid:var(--red-500);    --color-danger-solid-hover:var(--red-400);   --color-danger-subtle:rgba(239,68,68,.12);   --color-danger-text:#fca5a5; --color-danger-border:rgba(239,68,68,.25);

  --color-focus-ring:rgba(96,165,250,.45);
  --color-focus-ring-danger:rgba(248,113,113,.45);

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:0 12px 24px rgba(0,0,0,.55);
  --shadow-xl:0 24px 48px rgba(0,0,0,.6);
  --shadow-card:0 1px 3px rgba(0,0,0,.5);
}