/* ═══════════════════════════════════════════
   DESIGN SYSTEM — App CRPE + L3
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700&display=swap');

:root {
  /* ── Couleurs ── */
  --cream:       #F9F6E3;
  --cream-d:     #DDD8B8;
  --paper:       #FEFCF2;

  --sage:        #7EA882;
  --sage-l:      #D4E8D6;
  --sage-d:      #4E7A52;
  --sage-text:   #2F5032;

  --coral:       #D4847A;
  --coral-l:     #F5D8D4;
  --coral-text:  #7A2E28;

  --dusty:       #8EA8C3;
  --dusty-l:     #D2E3F0;
  --dusty-text:  #2B4A6A;

  --amber:       #C9993A;
  --amber-l:     #F5E8C8;
  --amber-text:  #6A4E10;

  --ink:         #3A3228;
  --ink-l:       #7A6E5E;

  /* ── Typographie ── */
  --hand: 'Fredoka One', cursive;
  --body: 'Nunito', sans-serif;

  /* ── Espacements ── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md: 16px;
  --sp-lg: 22px;
  --sp-xl: 32px;

  /* ── Arrondis ── */
  --r-sm:  8px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* ── Ombres ── */
  --shadow-sm: 0 1px 4px rgba(58, 50, 40, 0.06);
  --shadow-md: 0 3px 12px rgba(58, 50, 40, 0.10);
}