/* ============================================================
   PIXEL ÉTINCELLE — DESIGN TOKENS
   Charte graphique officielle : violet / saumon / orange / rouge
   sur fond sombre. Barlow Condensed (titres) + Nunito (texte).
   ============================================================ */

:root {
  /* ---------- Primitives (charte graphique) ---------- */
  --pe-violet: #553c8f;
  --pe-saumon: #eb6357;
  --pe-orange: #f6a049;
  --pe-rouge: #e51223;
  --pe-white: #ffffff;

  /* Échelle sombre resserrée autour d'une teinte médiane : le neumorphisme
     a besoin d'un écart perceptible entre "plus clair" et "plus sombre"
     que la même surface, pas de noir quasi absolu ni de blanc pur. */
  --pe-dark-900: #131320; /* fond principal (plus profond) */
  --pe-dark-800: #191928; /* surface de base neumorphique */
  --pe-dark-700: #20202f; /* surface légèrement élevée */
  --pe-dark-600: #272738; /* surface la plus élevée */
  --pe-dark-500: #313145; /* reflet clair (jamais du blanc) */

  --pe-grad: linear-gradient(135deg, var(--pe-orange) 0%, var(--pe-rouge) 45%, var(--pe-violet) 100%);

  /* ---------- Semantic surfaces (tout reste sombre, aucune section claire) ---------- */
  --bg-primary: var(--pe-dark-900);
  --bg-secondary: var(--pe-dark-800);
  --bg-tertiary: var(--pe-dark-700);
  --bg-elevated: var(--pe-dark-600);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---------- Semantic text ---------- */
  --text-primary: rgba(255, 255, 255, 0.94);
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-muted: rgba(255, 255, 255, 0.46);

  /* ---------- Neumorphisme — duo d'ombres (clair / sombre) par surface ---------- */
  --neu-light-800: rgba(255, 255, 255, 0.035);
  --neu-dark-800: rgba(0, 0, 0, 0.55);
  --neu-light-700: rgba(255, 255, 255, 0.045);
  --neu-dark-700: rgba(0, 0, 0, 0.5);
  --neu-light-600: rgba(255, 255, 255, 0.055);
  --neu-dark-600: rgba(0, 0, 0, 0.45);

  /* Panneau "extrudé" (raised) — à utiliser avec le fond de la même surface */
  --neu-raised-800: -10px -10px 22px var(--neu-light-800), 12px 12px 26px var(--neu-dark-800);
  --neu-raised-700: -9px -9px 20px var(--neu-light-700), 11px 11px 24px var(--neu-dark-700);
  --neu-raised-600: -8px -8px 18px var(--neu-light-600), 10px 10px 22px var(--neu-dark-600);
  /* Panneau "enfoncé" (inset) — champs de formulaire, états pressés */
  --neu-inset-800: inset 5px 5px 12px var(--neu-dark-800), inset -5px -5px 12px var(--neu-light-800);
  --neu-inset-700: inset 5px 5px 12px var(--neu-dark-700), inset -5px -5px 12px var(--neu-light-700);

  /* ---------- Accents ---------- */
  --accent-primary: var(--pe-orange);
  --accent-secondary: var(--pe-rouge);
  --accent-tertiary: var(--pe-violet);
  --accent-quaternary: var(--pe-saumon);

  /* ---------- Typography ---------- */
  --font-title: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Nunito', Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --fs-2xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --fs-4xl: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  --fs-5xl: clamp(3.25rem, 2.2rem + 4.5vw, 5.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* ---------- Spacing scale (marketing density) ---------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ---------- Radius / shadow / motion ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 16px 40px rgba(85, 60, 143, 0.35);

  /* Bouton "velouté" — élévation ambiante sombre neutre + galbe interne glossy */
  --btn-raised: 0 14px 28px -6px rgba(0, 0, 0, 0.55), 0 6px 14px -4px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.22);
  --btn-raised-hover: 0 20px 40px -6px rgba(0, 0, 0, 0.6), 0 10px 20px -4px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.22);
  --btn-pressed: inset 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 -1px 1px rgba(255, 255, 255, 0.15);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Z-index scale ---------- */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 100;
  --z-top: 1000;
}

@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}