/* ==========================================================================
   Jetons de design — l'univers de Rika
   Palette relevee directement sur le logo et la banniere :
   bleu nuit dominant, rose et jaune en secondaires.
   ========================================================================== */

:root {
  /* --- Bleus : du vide interstellaire au bleu roi de la banniere --------- */
  --nuit-0: #05061a;
  --nuit-1: #070a2a;
  --nuit-2: #0c1147;
  --nuit-3: #131c69;
  --bleu-roi: #142a8f;
  --bleu-vif: #29abe2;
  --bleu-glace: #9fd8f6;

  /* --- Roses ------------------------------------------------------------- */
  --rose: #ff5fc8;
  --rose-neon: #ff2fb5;
  --rose-pale: #ffc2e8;

  /* --- Jaunes ------------------------------------------------------------ */
  --jaune: #ffc94a;
  --jaune-clair: #ffe9a8;

  /* --- Neutres ----------------------------------------------------------- */
  --blanc: #f4f7ff;
  --texte: #dde3ff;
  --texte-doux: #a3abdf;
  --texte-faible: #7b83b8;

  /* --- Surfaces ---------------------------------------------------------- */
  --voile: rgb(10 14 55 / 0.62);
  --voile-fort: rgb(7 10 42 / 0.86);
  --bordure: rgb(159 176 255 / 0.22);
  --bordure-vive: rgb(255 201 74 / 0.45);

  /* --- Halos ------------------------------------------------------------- */
  --halo-rose: 0 0 28px rgb(255 95 200 / 0.45);
  --halo-jaune: 0 0 24px rgb(255 201 74 / 0.42);
  --halo-bleu: 0 0 32px rgb(41 171 226 / 0.40);

  /* --- Typographie ------------------------------------------------------- */
  --font-titre: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-texte: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-pixel: "Silkscreen", "Courier New", monospace;

  /* Echelle fluide : les titres respirent sur grand ecran sans casser
     la lisibilite sur telephone. */
  --pas-0: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --pas-1: clamp(0.94rem, 0.90rem + 0.2vw, 1.02rem);
  --pas-2: clamp(1.10rem, 1.02rem + 0.4vw, 1.28rem);
  --pas-3: clamp(1.40rem, 1.22rem + 0.9vw, 1.95rem);
  --pas-4: clamp(1.85rem, 1.45rem + 2.0vw, 3.05rem);
  --pas-5: clamp(2.55rem, 1.70rem + 4.2vw, 5.25rem);

  /* --- Rythme ------------------------------------------------------------ */
  --gouttiere: clamp(1rem, 0.6rem + 2vw, 2rem);
  --largeur: 1180px;
  --largeur-texte: 68ch;
  --rayon: 18px;
  --rayon-s: 10px;

  /* --- Mouvement --------------------------------------------------------- */
  --transition: 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le site est nocturne par nature : on le declare pour que les widgets
   natifs (barres de defilement, champs de formulaire) suivent. */
:root { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 1ms; }
}