/* Tokens de design partagés entre le runtime (iframe) et la chrome (parent).
   Pensés pour un écran ADDITIF : le noir = pixel éteint = transparent.
   Donc : fonds très sombres, texte blanc, accents saturés, jamais de gris < #ccc. */
:root {
  /* Scène */
  --sc-stage: 600px;
  --sc-safe: 48px;          /* marge de sécurité (bord optique rogné) */
  --sc-safe-bottom: 104px;  /* place pour la chrome basse */
  --sc-scale: 1;            /* calculé par le runtime/chrome */
  --sc-type: 1;             /* échelle typo (1 -> 1.25 en gros mode) */

  /* Typographie */
  --sc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sc-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, monospace;
  --fs-kicker: calc(20px * var(--sc-type));
  --fs-hook:   calc(28px * var(--sc-type));
  --fs-title:  calc(46px * var(--sc-type));
  --fs-body:   calc(30px * var(--sc-type));
  --fs-foot:   calc(23px * var(--sc-type));
  --fs-chrome: 20px;        /* compteur : jamais scalé */

  /* Couleurs */
  --c-bg:     #000000;      /* transparent dans les verres */
  --c-panel:  #0b0b0f;      /* léger relief pour cartes/overlays */
  --c-fg:     #ffffff;
  --c-fg-soft:#d6d6de;      /* secondaire (jamais sous #ccc) */
  --c-line:   rgba(255,255,255,.22);
  --c-line-soft: rgba(255,255,255,.12);

  /* Accents (sémantique reprise de fsociety) */
  --c-cyan:   #22d3ee;
  --c-amber:  #facc15;
  --c-magenta:#f472b6;
  --c-violet: #a855f7;
  --c-red:    #f87171;
  --c-green:  #34d399;
  --sc-accent: var(--c-cyan); /* accent courant, écrasé par data-accent */

  /* Composants */
  --hit: 64px;              /* taille mini d'une cible cliquable */
  --radius: 18px;
  --dur: .22s;
}