/* Kumo · jetons de design : couleurs, typographie, espacements et système de mouvement.
   Toute valeur réutilisée vit ici ; les autres feuilles ne font que s'y référer. */

:root {
  /* Couleurs ---------------------------------------------------------- */
  --noir: #111111;
  --nuit-2: #171717;
  --nuit-3: #1f1f1f;
  --blanc: #ffffff;
  --washi: #f5f0e6;            /* papier blanc légèrement chaud */
  --washi-2: #ece5d6;
  --rose: #eb2f77;             /* rose réel du logo : texte #111 dessus (4,68:1) */
  --rose-clair: #f45c95;       /* survols */
  --rose-encre: #c41e5f;       /* petit texte rose sur papier (5,0:1) */
  --texte-nuit: #f5f0e6;
  --texte-nuit-doux: #a8a39a;  /* 7,5:1 sur noir */
  --texte-papier: #111111;
  --texte-papier-doux: #5e5a54; /* 6,0:1 sur washi */
  --ligne-nuit: rgb(245 240 230 / 0.14);
  --ligne-papier: rgb(17 17 17 / 0.14);
  --voile-nuit: rgb(245 240 230 / 0.06);

  /* Typographie ------------------------------------------------------- */
  --font-titre: "Zen Antique", "Zen Antique Secours", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-texte: "Zen Kaku Gothic New", "Zen Kaku Secours", system-ui, sans-serif;
  --fs-hero: clamp(2.55rem, 1.35rem + 5.3vw, 6.1rem);
  --fs-h2: clamp(2.15rem, 1.55rem + 2.7vw, 3.9rem);
  --fs-h3: clamp(1.22rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.9rem;
  --fs-micro: 0.78rem;
  --lh-tight: 1.1;
  --lh-body: 1.7;
  --tracking: 0.04em;
  --tracking-wide: 0.2em;

  /* Espacements et formes --------------------------------------------- */
  --gutter: clamp(16px, 4.5vw, 48px);
  --container: 1200px;
  --section-y: clamp(88px, 11vw, 160px);
  --gap-s: clamp(12px, 1.5vw, 16px);
  --gap-m: clamp(20px, 2.5vw, 32px);
  --gap-l: clamp(32px, 5vw, 64px);
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;
  --radius-pill: 999px;
  --header-h: 64px;
  --touch: 44px;               /* cible tactile minimale */

  /* Système de mouvement ---------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);   /* toutes les interactions et apparitions */
  --ease-loop: cubic-bezier(.45, 0, .55, 1);  /* uniquement les boucles d'ambiance */
  --dur-1: 150ms;   /* pression, couleur */
  --dur-2: 300ms;   /* survol, focus, pastille */
  --dur-3: 600ms;   /* apparitions, modale */
  --dur-4: 1200ms;  /* tracés au pinceau, entrée de l'accueil */
  --stagger: 60ms;  /* décalage entre éléments : calc(var(--i) * var(--stagger)) */
  --rise: 24px;     /* déplacement des apparitions */
  --loop-float: calc(var(--dur-4) * 5);     /* 6 s : flottement du nuage */
  --loop-pulse: calc(var(--dur-4) * 4);     /* 4,8 s : pulsation de la spirale */
  --loop-waves: calc(var(--dur-4) * 20);    /* 24 s : vagues seigaiha */
  --loop-drift-1: calc(var(--dur-4) * 50);  /* 60 s : nuages proches */
  --loop-drift-2: calc(var(--dur-4) * 75);  /* 90 s */
  --loop-drift-3: calc(var(--dur-4) * 100); /* 120 s : nuages lointains */
  --intro-delay: 0ms; /* retard de l'entrée de l'accueil quand l'intro est affichée */

  /* Plans ------------------------------------------------------------- */
  --z-sky: 0;
  --z-content: 1;
  --z-header: 50;
  --z-menu: 60;
  --z-intro: 100;
  --z-cursor: 200;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 76px;
  }
}