/* ============================================================
   g00dtime Design Tokens — Scale & Structure
   NB: Les couleurs restent dans les thèmes (/app/css/<theme>.css)
   Ce fichier définit uniquement les tokens de forme, taille et timing.
   ============================================================ */

:root {
  /* ── Border radius ── */
  --radius-sm:     6px;      /* tags, badges, sous-éléments */
  --radius-md:     10px;     /* inputs, petits boutons, chips */
  --radius-lg:     14px;     /* cards, panels, dropdowns */
  --radius-xl:     20px;     /* modals, hero cards, drawers */
  --radius-2xl:    28px;     /* grandes surfaces arrondies */
  --radius-pill:   50px;     /* boutons pill (auto-ajusté) */
  --radius-circle: 50%;      /* avatars, boutons iconiques */

  /* ── Spacing (multiples de 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;

  /* ── Famille ──
     Inter est auto-hébergée (/app/css/fonts.css, .woff2 dans /app/fonts/) :
     plus aucun appel à fonts.googleapis.com. Le token n'apporte PAS la
     feuille — une page qui s'en sert doit charger fonts.css, sinon elle
     retombe sur system-ui. Le préfixe est `--font-family-` et non `--font-`,
     déjà pris par l'échelle de tailles juste dessous. */
  --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── Typography scale ── */
  --font-2xs:  0.7rem;    /* tiny labels, badges count */
  --font-xs:   0.78rem;   /* texte secondaire, timestamps */
  --font-sm:   0.85rem;   /* small copy, labels */
  --font-md:   0.92rem;   /* body courant, boutons */
  --font-base: 1rem;      /* base (16px) */
  --font-lg:   1.1rem;    /* sous-titres */
  --font-xl:   1.25rem;   /* titres de section */
  --font-2xl:  1.5rem;    /* titres de page */
  --font-3xl:  2rem;      /* grands titres */
  --font-4xl:  3.5rem;    /* grands affichages numériques (timer) */
  --font-display: 4rem;   /* maximum affichage (BPM, gros chiffres) */

  /* ── Interlettrage ── */
  --tracking-tight:  -0.02em;  /* grands titres, où le défaut respire trop */
  --tracking-normal: 0;
  --tracking-wide:   0.12em;   /* petites capitales : kickers, titres de groupe */

  /* ── Line-height ── */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;

  /* ── Font weights ── */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Élévation / ombres ── */
  --shadow-1:     0 1px 4px rgba(0, 0, 0, 0.12);
  --shadow-2:     0 4px 14px rgba(0, 0, 0, 0.20);
  --shadow-3:     0 8px 30px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary, #4ea3ff) 30%, transparent);
  --shadow-glow:  0 4px 18px color-mix(in srgb, var(--primary, #4ea3ff) 35%, transparent);

  /* ── Transitions ── */
  --t-fast: 0.12s ease;
  --t-base: 0.22s ease;
  --t-slow: 0.35s ease;

  /* ── Chrome de module ──
     Hauteur de la barre de titre d'un module et diamètre de ses boutons
     d'action. Ils ne dérivent pas de l'échelle d'espacement : ce sont deux
     mesures de confort tactile (44 px de cible utile pour un cercle de 38 px,
     bordure et halo de focus compris), et elles doivent être IDENTIQUES d'un
     module à l'autre — c'est tout l'objet de `.gt-page-header`. */
  --header-h:       64px;
  --control-circle: 38px;
  --icon-action:    20px;   /* trait 2 — l'icône d'un bouton d'en-tête */
  --badge-dot:      18px;   /* pastille de compteur posée sur un bouton */

  /* ── Zones sûres (encoche, indicateur d'accueil) ──
     Toujours passer par ces deux jetons, jamais par `env(safe-area-inset-*)`
     en direct : WebKit propage les marges du document de premier niveau à
     TOUTES ses iframes (Chromium, lui, y répond 0). Un module monté dans le
     shell dashboard comptait donc l'encoche une seconde fois sur iOS, après le
     shell — d'où les 59 px vides au-dessus du titre, invisibles sur Android et
     sur ordinateur. Le shell remet ces jetons à 0 dans ses iframes
     (`inc/pwa_include.php`), et une page ouverte seule garde la vraie valeur. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* ── Interactions ── */
  --scale-press:      0.96;
  --opacity-hover:    0.88;
  --opacity-muted:    0.6;
  --opacity-disabled: 0.45;
}