/* ═══════════════════════════════════════════════════════════
   moncentredeloisirs.com — Design System v0
   Tokens (couleurs, typo, espacements, radius, shadows, motion)
   Auteur : Julie Vasseur (UX Senior) + Sara Fontaine (Product Designer) — 2026-05-19
   Cible : niveau UX premium parents (vs encolonie.fr), grand public chaleureux.
   Palette dediee. NE PAS confondre avec MonEspaceACM (SaaS B2B violet/orange) ni macolonie (bleu institutionnel).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs primaires ───────────────────────────────────
     Ancre : vert printemps confiance (proche nature/loisirs), chaud et rassurant pour parents.
     Eviter bleu (macolonie) et violet (MonEspaceACM). */
  --primary-50:  #ECFDF5;
  --primary-100: #D1FAE5;
  --primary-200: #A7F3D0;
  --primary-300: #6EE7B7;
  --primary-400: #34D399;
  --primary-500: #10B981;   /* primaire principale */
  --primary-600: #059669;   /* hover */
  --primary-700: #047857;
  --primary-800: #065F46;
  --primary-900: #064E3B;

  /* Accent chaleureux (CTAs secondaires, illustrations enfants) */
  --accent-50:  #FFF7ED;
  --accent-100: #FFEDD5;
  --accent-300: #FDBA74;
  --accent-500: #F97316;   /* orange terracotta */
  --accent-600: #EA580C;
  --accent-700: #C2410C;

  /* Neutres (gris chauds, plus humains que pure-greys) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAF9;
  --neutral-100: #F5F5F4;
  --neutral-200: #E7E5E4;
  --neutral-300: #D6D3D1;
  --neutral-400: #A8A29E;
  --neutral-500: #78716C;
  --neutral-600: #57534E;
  --neutral-700: #44403C;
  --neutral-800: #292524;
  --neutral-900: #1C1917;

  /* Semantiques */
  --success: #10B981;
  --warning: #F59E0B;
  --danger:  #DC2626;
  --info:    #0EA5E9;

  /* Surfaces fonctionnelles */
  --bg-page:    var(--neutral-50);
  --bg-card:    var(--neutral-0);
  --bg-muted:   var(--neutral-100);
  --bg-overlay: rgba(28, 25, 23, 0.55);

  --text-strong: var(--neutral-900);
  --text-body:   var(--neutral-700);
  --text-muted:  var(--neutral-500);
  --text-onprimary: var(--neutral-0);

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

  /* ── Typographie ──────────────────────────────────────────
     Display : Fraunces (serif chaleureux, editorial, presence)
     Body    : Inter (lisibilite UI, web optimise)
     Cohert avec encolonie.fr (serif + sans editorial duo). */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', 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.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

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

  /* ── Espacements ──────────────────────────────────────────
     Base 4px. */
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* ── Rayons ───────────────────────────────────────────────
     Reference : encolonie utilise des rayons doux (~12-20px). */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Ombres (premium, soft, jamais agressives) ────────────── */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 10px rgba(28, 25, 23, 0.06), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 12px 28px rgba(28, 25, 23, 0.10), 0 4px 8px rgba(28, 25, 23, 0.06);
  --shadow-xl: 0 24px 48px rgba(28, 25, 23, 0.14), 0 8px 16px rgba(28, 25, 23, 0.08);
  --shadow-primary: 0 8px 24px rgba(16, 185, 129, 0.22);

  /* ── Motion ───────────────────────────────────────────────
     Reference : encolonie travaille des transitions courtes ~150-250ms.
     Easings : standard + spring-ease pour micro-interactions. */
  --motion-fast:   120ms;
  --motion-base:   200ms;
  --motion-slow:   320ms;
  --motion-slower: 480ms;
  --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 (en commentaire JS-friendly) ────────────── */
  --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 (obligatoire WCAG 2.4.7) ─────────── */
  --focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.35);
}

/* 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;
  }
}