/* ============================================================
   STOKHOS — tokens de design
   Source : design_handoff_stokhos/README.md (hifi, finale)
   ============================================================ */
:root {
  /* Couleurs — paliers de surface */
  --c-bg: #12161D;            /* Bronzage : fond app */
  --c-canvas: #0E1116;        /* Fond derrière le device (docs/dev) */
  --c-card: #1C232E;          /* Acier : cartes, inputs, surfaces */
  --c-navy: #161D2A;          /* Carte navy accent (QR, invitations — social) */
  --c-raised: #28303D;        /* Acier poli : bordures 1px, état sélectionné */
  --c-border: #28303D;
  --c-border-light: #3A4350;  /* Bordures secondaires, points vides */

  /* Laiton — l'accent unique */
  --c-brass: #C2A05E;
  --c-brass-hover: #D8BC7E;
  --c-brass-border: rgba(194, 160, 94, .4);
  --c-brass-border-strong: rgba(194, 160, 94, .5);
  --c-focus-ring: rgba(194, 160, 94, .15);
  --c-guide-scrim: rgba(6, 9, 14, .58); /* Spotlight du tutoriel : tout s'assombrit sauf la cible */

  /* Textes */
  --c-paper: #ECE7DD;         /* Papier cible : texte principal */
  --c-impact: #E9E2D4;        /* Papier impact : points de notation */
  --c-text2: #AEB6C2;         /* Texte secondaire */
  --c-grey: #8B93A1;          /* Gris armurier : labels, méta */
  --c-dim: #5A6472;           /* Gris éteint : tertiaire, wishlist */
  --c-ghost: #4A5462;         /* Fantôme : états off, footers social */

  /* Signal — usage ponctuel UNIQUEMENT (record, impacts C50, alerte) */
  --c-spotter: #E8562A;
  --c-alert: #D46E5A;         /* Actions destructives (retirer, supprimer) */
  --c-alert-border: rgba(212, 110, 90, .4);
  --c-scrim: rgba(11, 14, 19, .72);

  /* Typographies */
  --f-display: 'Big Shoulders Display', sans-serif;
  --f-body: 'Public Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;

  /* Motion — mécanique d'armurerie */
  --ease: cubic-bezier(.2, 0, 0, 1);        /* standard, sec */
  --ease-stop: cubic-bezier(.25, 0, .15, 1.06); /* cran d'arrêt */
  --t-micro: .15s;
  --t-ui: .2s;
  --t-screen: .3s;

  /* Formes */
  --r: 5px;
  --r-chip: 4px;
  --r-plus: 6px;

  /* Layout */
  --tabbar-h: 92px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}