/* Jetons de design — site vitrine Lumoz.
   Aucune couleur / espace magique hors de ce fichier. */

:root {
  /* Couleur */
  --color-bg: #0b0a14;
  --color-bg-elevated: #12101c;
  --color-surface: rgba(26, 23, 48, 0.55);
  --color-text: #f4f2fa;
  --color-text-muted: #a8a3bc;
  --color-brand: #5b4fe0;
  --color-brand-soft: #7a6bff;
  --color-brand-deep: #4a3ac8;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-focus: #7a6bff;
  --color-hero-glow: rgba(91, 79, 224, 0.35);

  /* Typographie */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  --text-hero: clamp(2.75rem, 6vw + 1rem, 4.5rem);
  --text-h1: clamp(2rem, 3vw + 1rem, 2.75rem);
  --text-h2: clamp(1.5rem, 1.5vw + 0.85rem, 1.85rem);
  --text-body: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
  --text-small: 0.875rem;

  --leading-tight: 1.15;
  --leading-body: 1.65;
  --tracking-display: -0.02em;

  /* Espace (échelle 4/8) */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-7: 3rem; /* 48 */
  --space-8: 4rem; /* 64 */
  --space-9: 6rem; /* 96 */

  --page-max: 72rem;
  --page-pad: 1.25rem;

  /* Forme */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-enter: 360ms;
  --duration-float: 7s;

  /* Header */
  --header-h: 4rem;
}

@media (min-width: 768px) {
  :root {
    --page-pad: 2.5rem;
  }
}