/* =================================================================== */
/*                    ASTROKID — DESIGN TOKENS (M2.11)                 */
/*         Identite: pastels iridescents + glass morphism              */
/*                Source de verite : DESIGN.md                          */
/* =================================================================== */

:root {
  /* --- Base warm --- */
  --kid-cream: #fbf7f2;
  --kid-cream-2: #f6efe6;
  --kid-ink: #1f1a17;
  --kid-ink-2: #5b534e;
  --kid-ink-3: #8c847e;
  --kid-line: rgba(31, 26, 23, 0.1);
  --kid-line-soft: rgba(31, 26, 23, 0.06);
  --kid-paper: #ffffff;

  /* --- Iridescent pastels --- */
  --kid-rose: #f3c8d6;
  --kid-peach: #fbdcc6;
  --kid-lav: #ddd3f0;
  --kid-sky: #c9dcf0;
  --kid-butter: #fcecc8;

  /* --- Texte --- */
  --kid-text: #1f1a17;
  --kid-text-inverse: #fbf7f2;

  /* --- Etats --- */
  --kid-success: #5e8a67;
  --kid-warn: #c9874a;
  --kid-error: #b54848;
  --kid-info: #4a6b8e;

  /* --- Glass layers --- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-soft: rgba(255, 255, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-border-soft: rgba(255, 255, 255, 0.65);
  --glass-blur: 18px;
  --glass-blur-soft: 14px;

  /* --- Gradients --- */
  --gradient-primary: linear-gradient(135deg, #f3c8d6 0%, #fbdcc6 50%, #ddd3f0 100%);

  /* --- Typographie --- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* --- Espacements (base 4px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Rayons --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* --- Ombres --- */
  --shadow-sm: 0 1px 2px rgba(31, 26, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 26, 23, 0.08);
  --shadow-lg: 0 12px 32px rgba(31, 26, 23, 0.12);
  --shadow-glass: 0 30px 60px -20px rgba(60, 40, 80, 0.18), 0 10px 20px -10px rgba(60, 40, 80, 0.1);
  --shadow-glass-soft: 0 12px 28px -12px rgba(60, 40, 80, 0.12);
  --shadow-warm: 0 10px 24px -8px rgba(200, 120, 160, 0.35);
  --shadow-warm-hover: 0 14px 30px -8px rgba(200, 120, 160, 0.45);

  /* --- Transitions --- */
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Breakpoints (ref, Tailwind utilise en pratique) --- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* --- Couleurs éléments pythagoriciens (Atelier V14) --- */
  --c-feu: #d65a7f;
  --c-eau: #5a8cb6;
  --c-air: #d9854a;
  --c-terre: #9778c2;

  /* --- LEGACY aliases (deprecated, remove en M2.12) --- */
  --kid-ink-soft: var(--kid-ink-2);
  --kid-text-soft: var(--kid-ink-2);
  --kid-text-muted: var(--kid-ink-3);
  --kid-cream-deep: var(--kid-cream-2);
  --kid-peach-soft: var(--kid-peach);
  --kid-sage: #9bb59f;
  --kid-gold: #d4a84b;
  --kid-berry: #8e3a5a;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--kid-text);
  background: var(--kid-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--kid-ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

code,
pre {
  font-family: var(--font-mono);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}