/* ═══════════════════════════════════════════════════════════
   moncentredeloisirs.com — Design System v1 (identite D1)
   Tokens : couleurs, typo, espacements, radius, shadows, motion.
   Identite D1 "maison-accueil qui sourit" — signature AMBRE chaude
   + bleu nuit + vert reassurance + neutres creme.
   Refonte : Sara Fontaine (DS/UI) + Aurore Vidal (DA), 2026-05-22.
   Cible : superieur a encolonie.fr, chaleureux/proximite, niveau elite.
   NE PAS confondre avec MonEspaceACM (violet/orange) ni macolonie (bleu).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Primaire : AMBRE signature (la maison-accueil) ───────────
     Couleur de marque chaude, distincte de l'indigo encolonie et
     du vert generique de la v0. Aplat plein, scalable. */
  --primary-50:  #FFF6E9;
  --primary-100: #FEE9C7;
  --primary-200: #FCD79A;
  --primary-300: #FABF63;
  --primary-400: #F7A833;
  --primary-500: #F4920A;   /* AMBRE signature (logo) */
  --primary-600: #DB7E04;   /* hover */
  --primary-700: #B5650A;   /* texte sur fond clair, actif */
  --primary-800: #8C4E0E;
  --primary-900: #693B0E;

  /* Accent solaire (badges, surlignages, petites touches de joie) */
  --accent-50:  #FFF8E1;
  --accent-100: #FFEFB8;
  --accent-300: #FFD766;
  --accent-500: #FFC23B;   /* jaune solaire */
  --accent-600: #F0A91E;
  --accent-700: #C9870D;

  /* Vert reassurance (gratuit / CAF / succes) — continuite ADN */
  --green-50:   #E7F8F3;
  --green-100:  #C5EEE3;
  --green-300:  #6FD3BD;
  --green-500:  #2DB39A;
  --green-600:  #1E9C85;
  --green-700:  #157E6B;

  /* Bleu nuit doux : titres, texte fort, footer, fonds sombres */
  --night-700:  #2A3B4D;
  --night-800:  #22303F;
  --night-900:  #1C2A39;   /* footer / texte fort */
  --night-950:  #14202C;

  /* ── Neutres (gris CHAUDS cremes, humains, pas de gris froid) ── */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FFF8F2;   /* fond page creme */
  --neutral-100: #FBF1E8;
  --neutral-200: #F1E6DA;
  --neutral-300: #E4D6C8;
  --neutral-400: #C3B2A2;
  --neutral-500: #8C7B6C;
  --neutral-600: #6B5C4F;
  --neutral-700: #4D4136;   /* corps de texte chaud */
  --neutral-800: #332B23;
  --neutral-900: #1C2A39;   /* aligne sur le bleu nuit pour les titres */

  /* Semantiques */
  --success: #1E9C85;
  --warning: #F4920A;
  --danger:  #DC4A3D;
  --info:    #2D8FB3;

  /* Surfaces fonctionnelles */
  --bg-page:    var(--neutral-50);
  --bg-card:    var(--neutral-0);
  --bg-muted:   var(--neutral-100);
  --bg-warm:    var(--primary-50);
  --bg-dark:    var(--night-900);
  --bg-overlay: rgba(28, 42, 57, 0.55);

  --text-strong: var(--night-900);
  --text-body:   var(--neutral-700);
  --text-muted:  var(--neutral-500);
  --text-onprimary: #FFFFFF;
  --text-ondark:  var(--neutral-50);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* ── Typographie ──────────────────────────────────────────────
     Display : Poppins (geometrique, ronde, chaleureuse) — proximite
               famille, excellente en petit, cohere avec le logo.
     Body    : Inter (lisibilite UI). */
  --font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.375rem;  /* 22px */
  --fs-xl:   1.75rem;   /* 28px */
  --fs-2xl:  2.25rem;   /* 36px */
  --fs-3xl:  3rem;      /* 48px */
  --fs-4xl:  4rem;      /* 64px */

  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ── Espacements (base 4px) ─────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Rayons (rondeurs genereuses, identite chaleureuse) ─────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* ── Ombres (douces, chaudes, jamais agressives) ─────────────── */
  --shadow-xs: 0 1px 2px rgba(76, 65, 54, 0.05);
  --shadow-sm: 0 1px 3px rgba(76, 65, 54, 0.07), 0 1px 2px rgba(76, 65, 54, 0.05);
  --shadow-md: 0 6px 16px rgba(76, 65, 54, 0.08), 0 2px 6px rgba(76, 65, 54, 0.05);
  --shadow-lg: 0 16px 36px rgba(76, 65, 54, 0.12), 0 6px 12px rgba(76, 65, 54, 0.06);
  --shadow-xl: 0 28px 60px rgba(76, 65, 54, 0.16), 0 10px 20px rgba(76, 65, 54, 0.08);
  --shadow-primary: 0 10px 26px rgba(244, 146, 10, 0.30);
  --shadow-primary-sm: 0 6px 16px rgba(244, 146, 10, 0.24);

  /* ── Motion ───────────────────────────────────────────────────
     Transitions courtes 120-320ms + spring pour micro-interactions. */
  --motion-fast:   130ms;
  --motion-base:   220ms;
  --motion-slow:   340ms;
  --motion-slower: 520ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Breakpoints (reference JS) ─────────────────────────────── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ── Container ──────────────────────────────────────────────── */
  --container-max: 1240px;
  --container-px: var(--space-6);

  /* ── Focus accessibilite (WCAG 2.4.7) ───────────────────────── */
  --focus-ring: 0 0 0 3px rgba(244, 146, 10, 0.40);
}

/* Reduced motion : respect WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   0ms;
    --motion-base:   0ms;
    --motion-slow:   0ms;
    --motion-slower: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}