/* ==========================================================================
   Lunéole — Colors & Type
   Nuit douce, conte illustré, accents rose pâle et or chaud
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- COLOR PRIMITIVES ---------- */

  /* Nuit — bleus profonds et violets (le coeur de l'univers) */
  --night-950: #0B0A1F;   /* presque noir, fond de l'app */
  --night-900: #131236;   /* background principal */
  --night-800: #1C1A4A;   /* surfaces élevées */
  --night-700: #262466;   /* surfaces hover / cards */
  --night-600: #332F85;
  --night-500: #4A44A8;

  /* Violet — lumière de lune sur l'horizon */
  --violet-900: #221547;
  --violet-700: #432977;
  --violet-500: #6B46C1;
  --violet-300: #9B7FD6;
  --violet-100: #D9CCF0;

  /* Rose pâle — l'accent principal (aube tendre) */
  --rose-900: #5C2539;
  --rose-700: #8F3A5E;
  --rose-500: #E09AB4;     /* accent principal */
  --rose-400: #EDB2C7;
  --rose-300: #F5C5D6;
  --rose-200: #FADDE6;
  --rose-100: #FDEEF2;

  /* Or chaud — éclat de lune, étoiles, CTA secondaire */
  --gold-700: #8B6A2A;
  --gold-500: #D4A85A;
  --gold-400: #E2BD7A;
  --gold-300: #EFD4A0;
  --gold-200: #F7E8C7;

  /* Crème — texte chaud sur fond nuit */
  --cream-100: #FBF6EC;
  --cream-200: #F2E8D4;
  --cream-300: #E4D4B2;

  /* Sémantiques (rares — on évite les rouges anxiogènes) */
  --success: #7FB89A;
  --warning: #E2BD7A;
  --danger:  #D98A8A;

  /* ---------- SEMANTIC COLORS (mode sombre par défaut) ---------- */

  --bg-base:        var(--night-950);
  --bg-surface:     var(--night-900);
  --bg-elevated:    var(--night-800);
  --bg-card:        rgba(38, 36, 102, 0.55);   /* night-700 @ 55% — glassy */
  --bg-card-solid:  var(--night-700);
  --bg-overlay:     rgba(11, 10, 31, 0.72);

  --fg-primary:     var(--cream-100);
  --fg-secondary:   var(--cream-300);
  --fg-muted:       rgba(251, 246, 236, 0.55);
  --fg-faint:       rgba(251, 246, 236, 0.35);
  --fg-on-rose:     var(--night-950);
  --fg-on-gold:     var(--night-950);

  --accent:         var(--rose-500);
  --accent-hover:   var(--rose-400);
  --accent-soft:    rgba(224, 154, 180, 0.18);
  --accent-warm:    var(--gold-400);

  --border-subtle:  rgba(251, 246, 236, 0.08);
  --border-soft:    rgba(251, 246, 236, 0.14);
  --border-strong:  rgba(251, 246, 236, 0.28);

  /* Gradients — utilisés pour skies, halos, protection */
  --grad-night-sky:   linear-gradient(180deg, #0B0A1F 0%, #1C1A4A 50%, #432977 100%);
  --grad-dawn:        linear-gradient(180deg, #221547 0%, #5C2539 55%, #E09AB4 100%);
  --grad-halo-rose:   radial-gradient(circle at 50% 40%, rgba(224,154,180,0.35) 0%, rgba(224,154,180,0) 60%);
  --grad-halo-gold:   radial-gradient(circle at 50% 40%, rgba(212,168,90,0.30) 0%, rgba(212,168,90,0) 55%);
  --grad-protection:  linear-gradient(180deg, rgba(11,10,31,0) 0%, rgba(11,10,31,0.55) 55%, rgba(11,10,31,0.92) 100%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-ui:      'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'Helvetica Neue', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fraunces optical & variation axes — à utiliser en font-variation-settings */
  --fraunces-soft: "opsz" 72, "SOFT" 100, "WONK" 1;

  /* ---------- TYPE SCALE ---------- */
  /* Échelle douce, arrondie. Tailles généreuses — parent fatigué la nuit. */

  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   34px;
  --text-3xl:   44px;
  --text-4xl:   56px;
  --text-5xl:   72px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;    /* pour texte de lecture des histoires */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADII ---------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-blob: 48% 52% 60% 40% / 55% 45% 55% 45%;   /* formes organiques */

  /* ---------- SHADOWS & GLOWS ---------- */
  /* Pas d'ombres grises/noires dures — on travaille avec des halos colorés */
  --shadow-card:   0 8px 24px -8px rgba(11, 10, 31, 0.55), 0 2px 6px rgba(11, 10, 31, 0.35);
  --shadow-modal:  0 24px 60px -12px rgba(11, 10, 31, 0.75);
  --glow-rose:     0 0 40px rgba(224, 154, 180, 0.35), 0 0 8px rgba(224, 154, 180, 0.25);
  --glow-gold:     0 0 48px rgba(212, 168, 90, 0.30), 0 0 8px rgba(212, 168, 90, 0.35);
  --glow-soft:     0 0 32px rgba(155, 127, 214, 0.22);
  --inner-velvet:  inset 0 1px 0 rgba(251, 246, 236, 0.06), inset 0 -1px 0 rgba(11, 10, 31, 0.3);

  /* ---------- MOTION ---------- */
  --ease-soft:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-breath:   cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-quick:     160ms;
  --dur-soft:      280ms;
  --dur-slow:      520ms;
  --dur-breath:    4200ms;   /* pour respiration d'éléments */
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================= */

.display-hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: var(--fraunces-soft);
  color: var(--fg-primary);
}

.display-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: var(--fraunces-soft);
  color: var(--fg-primary);
}

.display-story {
  /* titre d'histoire — italique tendre */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: var(--fraunces-soft);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: var(--fraunces-soft);
}

.h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.body-lg {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.body-story {
  /* texte des histoires — ample, généreux */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  letter-spacing: 0.005em;
  color: var(--cream-100);
}

.body-sm {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-400);
}

.caption {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
}

.numeric {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* =========================================================================
   GLOBAL ANIMATIONS
   ========================================================================= */
@keyframes lunTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes lunBreath  { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes lunFadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lunDrift   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}