/* ==========================================================================
   ANGELUS DESIGN TOKENS
   Système de variables réutilisable : couleurs, typographie, espacement,
   rayons, ombres. Toute personnalisation visuelle passe par ce fichier.
   ========================================================================== */

:root {
  /* --- Couleurs de marque --- */
  --a-color-primary: #ff2d78;      /* rose néon */
  --a-color-primary-dark: #d81f5f;
  --a-color-secondary: #ff3b3b;    /* rouge */
  --a-color-accent: #7b2ff7;       /* violet, pour variantes */
  --a-gradient-primary: linear-gradient(135deg, var(--a-color-primary), var(--a-color-secondary));
  --a-gradient-alt: linear-gradient(135deg, var(--a-color-accent), var(--a-color-primary));

  /* --- Fond / surfaces --- */
  --a-bg: #0a060a;
  --a-bg-elevated: #120912;
  --a-surface: #170c15;
  --a-surface-2: #1e1119;
  --a-border: #331726;

  /* --- Texte --- */
  --a-text: #f5eef2;
  --a-text-muted: #b9a4b1;
  --a-text-inverse: #0a060a;

  /* --- Typographie --- */
  --a-font-base: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --a-font-display: 'Poppins', var(--a-font-base);
  --a-fs-xs: 0.8rem;
  --a-fs-sm: 0.9rem;
  --a-fs-base: 1rem;
  --a-fs-lg: 1.15rem;
  --a-fs-xl: 1.5rem;
  --a-fs-2xl: 2rem;
  --a-fs-3xl: 2.75rem;
  --a-fs-hero: clamp(2.2rem, 5vw, 3.75rem);

  /* --- Espacement (échelle 4px) --- */
  --a-space-1: 0.25rem;
  --a-space-2: 0.5rem;
  --a-space-3: 0.75rem;
  --a-space-4: 1rem;
  --a-space-6: 1.5rem;
  --a-space-8: 2rem;
  --a-space-12: 3rem;
  --a-space-16: 4rem;
  --a-space-24: 6rem;

  /* --- Rayons --- */
  --a-radius-sm: 8px;
  --a-radius-md: 14px;
  --a-radius-lg: 20px;
  --a-radius-pill: 999px;

  /* --- Ombres --- */
  --a-shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --a-shadow-md: 0 10px 30px rgba(0,0,0,.35);
  --a-shadow-glow: 0 8px 24px rgba(255,45,120,.35);
  --a-shadow-glow-lg: 0 14px 40px rgba(255,45,120,.45);

  /* --- Transitions --- */
  --a-ease: cubic-bezier(.4,0,.2,1);
  --a-transition-fast: .18s var(--a-ease);
  --a-transition: .28s var(--a-ease);

  /* --- Container --- */
  --a-container-max: 1280px;
}