/* ============================================================================
   CADENCE — Design tokens  ·  :root custom properties
   Système de design vivant. Mobile-first, dark, offline/PWA.
   Importez ce fichier + fonts.css. Tout l'UI dérive de ces variables.
   (oklch entre parenthèses = teinte source : L et C constants, seule H varie,
    pour que les 5 signaux s'harmonisent.)
   ============================================================================ */

:root {

  /* ---- Fond & matière (cool near-black) -------------------------------- */
  --cad-bg:            #080b10;            /* base · l'origine, le vide      */
  --cad-surface:       #0d1117;            /* carte                          */
  --cad-surface-2:     #121822;            /* surface élevée · contrôle/input*/
  --cad-surface-3:     #0c0f18;            /* panneau viz (cohérence)        */
  --cad-dock:          rgba(16,22,31,.92); /* chrome persistant (rythme-dock)*/
  --cad-hairline:      rgba(255,255,255,.07);
  --cad-hairline-2:    rgba(255,255,255,.12);

  /* ---- Texte ----------------------------------------------------------- */
  --cad-text:          #eaf1f7;            /* primaire                       */
  --cad-text-bright:   #eef4f9;            /* wordmark / gros titres         */
  --cad-text-2:        #9fb0c0;            /* secondaire                     */
  --cad-text-3:        #7d8fa0;            /* labels                         */
  --cad-text-4:        #5d6b7a;            /* légende / tertiaire            */
  --cad-text-absent:   #3a4654;            /* « — » pas de donnée (sans glow)*/

  /* ---- Teintes-signal (une par rythme) --------------------------------- */
  --sig-marche:        #4fe0a0;  /* oklch(.84 .15 150) — pas · cadence       */
  --sig-coeur:         #ff6f8e;  /* oklch(.74 .16 12)  — FC · HRV · battement */
  --sig-souffle:       #4fd6d0;  /* oklch(.84 .12 200) — cohérence · vague   */
  --sig-mind:          #b69bff;  /* oklch(.76 .14 295) — EEG · oscillation   */
  --sig-corps:         #f0c061;  /* oklch(.83 .12 80)  — poids · masse       */
  --sig-coherence:     #e7defc;  /* oklch(.93 .04 290) — verrou ❤︎🧠 (≈ blanc)*/

  /* centres d'orbe / paquets de flux (variantes claires) */
  --sig-marche-lite:   #9bf2cd;
  --sig-coeur-lite:    #ffb6c6;
  --sig-souffle-lite:  #bff3ef;
  --sig-mind-lite:     #dccffe;
  --sig-corps-lite:    #fbe1ab;

  /* bords profonds d'orbe (stop sombre des dégradés radiaux) */
  --sig-marche-deep:   #0f6e48;
  --sig-coeur-deep:    #8e2540;
  --sig-souffle-deep:  #11787a;
  --sig-mind-deep:     #5b43a8;
  --sig-corps-deep:    #9a6e1f;

  /* ---- États sémantiques (mêmes partout) ------------------------------- */
  --state-connected:   #4fe0a0;            /* connecté                       */
  --state-searching:   #f0c061;            /* recherche · appairage (pulse)  */
  --state-lost:        #f0746e;            /* signal perdu · erreur          */
  --state-absent:      #283341;            /* capteur absent (point éteint)  */

  /* ---- Typographie ----------------------------------------------------- */
  --font-ui:   'Hanken Grotesk', system-ui, sans-serif;   /* UI · titres · prose */
  --font-data: 'IBM Plex Mono', ui-monospace, monospace;  /* chiffres · unités · codes */
  /* RÈGLE : toute donnée chiffrée est en --font-data + font-variant-numeric: tabular-nums */

  /* échelle — size / weight / line-height / letter-spacing ---------------- */
  --t-display-size: 96px;  --t-display-wt: 800; --t-display-lh: .92;  --t-display-ls: -.045em; /* wordmark Cadence */
  --t-band-size:    38px;  --t-band-wt:    700; --t-band-lh:   1.05;  --t-band-ls:   -.025em; /* titre de bande   */
  --t-title-size:   28px;  --t-title-wt:   700; --t-title-lh:  1.1;   --t-title-ls:  -.02em;  /* titre d'écran    */
  --t-h3-size:      20px;  --t-h3-wt:      600; --t-h3-lh:     1.25;  --t-h3-ls:     -.01em;  /* titre de carte   */
  --t-body-size:    16px;  --t-body-wt:    400; --t-body-lh:   1.55;  --t-body-ls:   0;       /* corps            */
  --t-body-sm-size: 14px;  --t-body-sm-wt: 400; --t-body-sm-lh:1.5;   --t-body-sm-ls:0;       /* corps secondaire */
  --t-label-size:   12px;  --t-label-wt:   600; --t-label-lh:  1;     --t-label-ls:  .18em;   /* eyebrow UPPERCASE */
  --t-label-sm-size:11px;  --t-label-sm-wt:600; --t-label-sm-lh:1;    --t-label-sm-ls:.14em;  /* eyebrow petit     */

  /* données chiffrées (mono, tabular) */
  --n-sacred-size: 116px;  --n-sacred-wt: 600; --n-sacred-lh: .82;    /* « chiffre sacré »   */
  --n-xl-size:      60px;  --n-xl-wt:     600; --n-xl-lh:     .82;     /* métrique héros (FC)  */
  --n-lg-size:      40px;  --n-lg-wt:     600; --n-lg-lh:     .9;      /* % cohérence          */
  --n-stat-size:    20px;  --n-stat-wt:   600; --n-stat-lh:   1;       /* valeur de tuile      */
  --n-meta-size:    12px;  --n-meta-wt:   500; --n-meta-lh:   1;       /* unités · codes · chips */

  /* ---- Espacement (base 4) --------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-18: 72px; --sp-24: 96px;
  --screen-pad: 18px;          /* marge intérieure d'un écran mobile        */
  --screen-max: 520px;         /* largeur max (centrée)                     */
  --touch-min: 44px;           /* cible tactile minimale                    */

  /* ---- Rayons ---------------------------------------------------------- */
  --r-sm: 11px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;

  /* ---- Ombres & glow (data = lumière) ---------------------------------- */
  --shadow-card:  0 18px 50px rgba(0,0,0,.5);
  --shadow-dock:  0 -2px 24px rgba(0,0,0,.4);

  /* recettes de glow par signal (à appliquer en box-shadow / text-shadow) */
  --glow-marche:    0 0 30px rgba(79,224,160,.4);
  --glow-coeur:     0 0 30px rgba(255,111,142,.4);
  --glow-souffle:   0 0 30px rgba(79,214,208,.4);
  --glow-mind:      0 0 30px rgba(182,155,255,.4);
  --glow-corps:     0 0 30px rgba(240,192,97,.4);
  --glow-coherence: 0 0 44px rgba(231,222,252,.55);
  /* chiffre qui glow : text-shadow: 0 0 28px rgba(<hue>,.5)                 */
  /* trait d'anneau/onde : filter: drop-shadow(0 0 5px rgba(<hue>,.7))      */

  /* ---- Système vivant (pilotable par Tweaks) --------------------------- */
  --cad-glow: .72;       /* multiplicateur d'opacité des halos · 0=off → 1=vif */
  --cad-play: running;   /* running | paused — gèle TOUTES les animations      */

  /* ---- Courbes de motion (voir motion.md pour les durées) -------------- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);    /* morph, transitions      */
  --ease-out-soft: cubic-bezier(.2, .8, .2, 1);   /* remplissage d'anneau    */
  --ease-overshoot: cubic-bezier(.34, 1.56, .64, 1); /* floraison radiale    */
  --ease-breath:   ease-in-out;                   /* respiration / halo      */
  --dur-morph: 420ms;    /* métamorphose d'une facette à l'autre             */
  --dur-ring:  700ms;    /* anneau qui se remplit au chargement              */
  --dur-celebrate: 1000ms; /* micro-célébration (jamais plus)               */
}

/* ============================================================================
   KEYFRAMES — le langage vivant. Durées posées à l'usage (cf. motion.md) :
   ex.  animation: cadBreathe 5.6s var(--ease-breath) infinite var(--cad-play);
   Toutes les animations respectent --cad-play (running|paused).
   ============================================================================ */

@keyframes cadBreathe { 0%,100%{ transform: scale(1); }      50%{ transform: scale(1.055); } }            /* orbe respire */
@keyframes cadHalo    { 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:.85; transform:scale(1.1);} } /* halo */
@keyframes cadPulse   { 0%,100%{ opacity:1; }                50%{ opacity:.25; } }                          /* point live */
@keyframes cadFlow    { from{ stroke-dashoffset:1200; }      to{ stroke-dashoffset:0; } }                   /* paquet sur l'onde (pathLength=1200) */
@keyframes cadLock    { 0%,100%{ opacity:.82; }              50%{ opacity:1; } }                            /* verrou cohérence */
@keyframes cadSpin    { to{ transform: rotate(360deg); } }                                                  /* anneau orbital */
@keyframes cadDrift   { from{ transform:translateX(0);}      to{ transform:translateX(-50%);} }             /* fond d'onde qui défile */
@keyframes cadFloat   { 0%,100%{ transform:translateY(0);}   50%{ transform:translateY(-7px);} }            /* flottement doux */

/* Accessibilité : Souffle/Mind doivent rester lisibles, l'app est anti-stress. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  /* orbes/anneaux gardent leur état final ; voir motion.md pour les fallbacks. */
}