/* =============================================================================
   DESIGN TOKENS - NIVEAU 2: TOKENS SÉMANTIQUES (COMPOSANTS GÉNÉRIQUES)
   Tokens basés sur des significations (primary, secondary, danger, success, etc.)
   Redéfinis au niveau 3 pour chaque style spécifique
   ============================================================================= */

:root {
  /* --- COULEURS DE COMPOSANTS PRIMAIRES --- */
  --color-primary-bg: var(--color-blue-50);
  --color-primary-bg-hover: var(--color-blue-100);
  --color-primary-border: var(--color-blue-500);
  --color-primary-text: var(--color-blue-700);

  /* --- COULEURS DE COMPOSANTS SECONDAIRES --- */
  --color-secondary-bg: var(--color-slate-50);
  --color-secondary-bg-hover: var(--color-slate-100);
  --color-secondary-border: var(--color-slate-500);
  --color-secondary-text: var(--color-slate-700);

  /* --- COULEURS D'ACCENT/SUCCÈS --- */
  --color-success-bg: var(--color-emerald-50);
  --color-success-bg-hover: var(--color-emerald-100);
  --color-success-border: var(--color-emerald-500);
  --color-success-text: var(--color-emerald-700);

  /* --- COULEURS D'AVERTISSEMENT --- */
  --color-warning-bg: var(--color-amber-50);
  --color-warning-bg-hover: var(--color-amber-100);
  --color-warning-border: var(--color-amber-500);
  --color-warning-text: var(--color-amber-700);

  /* --- COULEURS D'ERREUR --- */
  --color-error-bg: var(--color-red-50);
  --color-error-bg-hover: var(--color-red-100);
  --color-error-border: var(--color-red-500);
  --color-error-text: var(--color-red-700);

  /* --- COULEURS INFORMATIVES --- */
  --color-info-bg: var(--color-blue-50);
  --color-info-bg-hover: var(--color-blue-100);
  --color-info-border: var(--color-blue-500);
  --color-info-text: var(--color-blue-700);

  /* --- FOND ET TEXTE GÉNÉRIQUES --- */
  --color-bg-primary: var(--color-neutral-0);
  --color-bg-secondary: var(--color-neutral-50);
  --color-bg-tertiary: var(--color-neutral-100);

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);

  --color-border-light: var(--color-neutral-200);
  --color-border-medium: var(--color-neutral-300);
  --color-border-dark: var(--color-neutral-400);

  /* --- TYPOGRAPHIE SÉMANTIQUE --- */
  --font-body: var(--font-neo-grotesque);
  --font-heading: var(--font-neo-grotesque);
  --font-accent: var(--font-neo-grotesque);
  --font-code: var(--font-monospace-code);

  /* --- TAILLES DE TYPOGRAPHIE SÉMANTIQUE --- */
  --font-size-body: var(--font-size-base);
  --font-size-body-sm: var(--font-size-sm);
  --font-size-body-lg: var(--font-size-lg);

  --font-size-heading-1: var(--font-size-5xl);
  --font-size-heading-2: var(--font-size-4xl);
  --font-size-heading-3: var(--font-size-3xl);
  --font-size-heading-4: var(--font-size-2xl);
  --font-size-heading-5: var(--font-size-xl);
  --font-size-heading-6: var(--font-size-lg);

  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-strong: var(--font-weight-semibold);

  --font-weight-heading: var(--font-weight-bold);
  --font-weight-heading-display: var(--font-weight-extrabold);

  /* --- LIGNE HEIGHT SÉMANTIQUE --- */
  --line-height-body: var(--line-height-relaxed);
  --line-height-heading: var(--line-height-tight);

  /* --- ESPACEMENT SÉMANTIQUE --- */
  --spacing-inline-xs: var(--spacing-4);
  --spacing-inline-sm: var(--spacing-8);
  --spacing-inline-md: var(--spacing-16);
  --spacing-inline-lg: var(--spacing-24);
  --spacing-inline-xl: var(--spacing-32);

  --spacing-block-xs: var(--spacing-8);
  --spacing-block-sm: var(--spacing-12);
  --spacing-block-md: var(--spacing-24);
  --spacing-block-lg: var(--spacing-32);
  --spacing-block-xl: var(--spacing-48);

  /* --- BORDER RADIUS SÉMANTIQUE --- */
  --border-radius-button: var(--border-radius-md);
  --border-radius-input: var(--border-radius-md);
  --border-radius-card: var(--border-radius-lg);
  --border-radius-modal: var(--border-radius-lg);

  /* --- OMBRES SÉMANTIQUE --- */
  --shadow-button: var(--shadow-sm);
  --shadow-card: var(--shadow-md);
  --shadow-modal: var(--shadow-lg);
  --shadow-hover: var(--shadow-lg);

  /* --- TRANSITIONS SÉMANTIQUE --- */
  --transition-ui: var(--transition-base);
  --transition-motion: var(--transition-slow);
}