/* ============================================================
   MYSPECTACLE — tokens.css
   Source de vérité de la charte graphique interne
   (« Charte graphique MYSPECTACLE », Tavannes, v1.0).

   Ce fichier est destiné à être copié à l'identique dans chaque
   application interne : les deux thèmes partagent les mêmes noms
   de tokens, seules les valeurs changent. Aucun composant ne
   connaît le thème actif.

   Règle : aucune valeur en dur dans un composant. Si une valeur
   manque, on l'ajoute ici plutôt que sur place.
   ============================================================ */

/* ── Thème sombre — le défaut ──────────────────────────────── */
:root {
  color-scheme: dark;

  /* Rampe accent — violet scène, 100 → 900 */
  --accent-100: #f5f4ff;
  --accent-200: #e7e5fe;
  --accent-300: #d2cefd;
  --accent-400: #b5abfc;
  --accent-500: #968ae0;
  --accent-600: #796cbf;
  --accent-700: #5d5294;
  --accent-800: #423a6a;
  --accent-900: #2b2741;

  /* Surfaces */
  --bg:      #161826;  /* fond de page */
  --surface: #232532;  /* carte, panneau */
  --sunken:  #1b1d2a;  /* champ de saisie, fond enfoncé */
  --raised:  #2a2c3a;  /* survol d'une surface */
  --section: #262a60;  /* bandeau de section */

  /* Texte — l'échelle descend, elle ne passe jamais sous --muted-2 */
  --ink:     #e9e9ed;
  --ink-2:   rgba(233, 233, 237, .82);
  --ink-3:   rgba(233, 233, 237, .72);
  --muted:   rgba(233, 233, 237, .60);
  --muted-2: rgba(233, 233, 237, .56); /* plancher lisible : 4,8:1 sur --surface */

  /* Traits — l'élévation est une arête, pas une ombre empilée */
  --line:   #3f424d;                   /* arête de carte */
  --line-2: rgba(233, 233, 237, .42);  /* bordure de contrôle — 3:1 mini */
  --line-3: rgba(233, 233, 237, .16);  /* séparateur discret */

  /* Accent : une ligne, jamais un aplat.
     --accent ne sert qu'aux traits, pastilles et jauges ; dès que
     l'accent devient du texte on prend --accent-ink (charte,
     « Non négociable » : #9184d9 ne passe pas en paragraphe). */
  --accent:        #9184d9;
  --accent-ink:    #d2cefd;
  --accent-hover:  #b5abfc;
  --accent-fill:   #2b2741;              /* remplissage teinté, repos */
  --accent-fill-2: #423a6a;              /* remplissage teinté, actif */
  --accent-wash:   rgba(145, 132, 217, .12);
  --accent-press:  rgba(145, 132, 217, .22);
  --on-accent:     #f5f4ff;              /* texte posé sur --accent-fill* */

  /* Statuts — les seules teintes hors accent autorisées.
     Toujours pastille + libellé, jamais la couleur seule. */
  --neutral:   #7d8496;
  --neutral-2: #5c6070;
  --ok:    #4fb08a;  --ok-bg:   #2f3a36;  --ok-fg:   #a9e0c9;
  --warn:  #d9a441;  --warn-bg: #3d3527;  --warn-fg: #f0d5a3;
  --error: #d16a6a;  --err-bg:  #3d2b2b;  --err-fg:  #f2c0c0;

  /* Typographie — une seule famille, poids 400/500, 600 réservé aux
     chiffres qu'on veut faire ressortir. Jamais de 700. */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: var(--sans); /* les chiffres s'alignent en tabular-nums, pas en chasse fixe */

  /* Espacement — densité 0,7× */
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 11px;
  --space-6: 17px;
  --space-8: 22px;
  --space-12: 33px;

  /* Rayons — 8 px pour presque tout, 14 px réservé aux dialogues */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  /* Élévation — arête seule, puis arête + ombre ambiante */
  --shadow-sm: 0 0 0 1px var(--line);
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, .65);

  /* Focus clavier — visible partout, jamais supprimé sans remplacement */
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* ── Thème clair — bureau, impression, plein soleil ────────── */
[data-theme="light"] {
  color-scheme: light;

  --bg:      #f4f4f7;
  --surface: #ffffff;
  --sunken:  #ffffff;
  --raised:  #f4f4f7;
  --section: #e7e5fe;

  --ink:     #1c1e2b;
  --ink-2:   rgba(28, 30, 43, .88);
  --ink-3:   rgba(28, 30, 43, .80);
  --muted:   rgba(28, 30, 43, .72);
  --muted-2: rgba(28, 30, 43, .66); /* plancher lisible : 4,7:1 sur --bg */

  --line:   rgba(28, 30, 43, .14);
  --line-2: rgba(28, 30, 43, .52);
  --line-3: rgba(28, 30, 43, .10);

  /* En clair l'accent descend d'un pas (700) pour garder le contraste. */
  --accent:        #5d5294;
  --accent-ink:    #5d5294;
  --accent-hover:  #423a6a;
  --accent-fill:   #f5f4ff;
  --accent-fill-2: #e7e5fe;
  --accent-wash:   rgba(93, 82, 148, .08);
  --accent-press:  rgba(93, 82, 148, .16);
  --on-accent:     #2b2741;

  --neutral:   #5c6070;
  --neutral-2: #7d8496;
  --ok:    #2c6a52;  --ok-bg:   #e6f2ec;  --ok-fg:   #245a45;
  --warn:  #8a640f;  --warn-bg: #f8efd9;  --warn-fg: #71510c;
  --error: #a33f3f;  --err-bg:  #fbe9e9;  --err-fg:  #8c3535;

  --shadow-sm: 0 0 0 1px var(--line);
  --shadow-md: 0 0 0 1px rgba(28, 30, 43, .16), 0 6px 18px rgba(28, 30, 43, .08);
  --shadow-lg: 0 0 0 1px rgba(28, 30, 43, .20), 0 16px 40px rgba(28, 30, 43, .14);
}

/* À l'impression on bascule en clair : encre sombre sur papier blanc. */
@media print {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --sunken: #ffffff;
    --raised: #ffffff;
    --section: #e7e5fe;
    --ink: #1c1e2b;
    --ink-2: rgba(28, 30, 43, .88);
    --ink-3: rgba(28, 30, 43, .80);
    --muted: rgba(28, 30, 43, .72);
    --muted-2: rgba(28, 30, 43, .66);
    --line: rgba(28, 30, 43, .22);
    --line-2: rgba(28, 30, 43, .58);
    --line-3: rgba(28, 30, 43, .16);
    --accent: #5d5294;
    --accent-ink: #5d5294;
    --accent-fill: #f5f4ff;
    --accent-fill-2: #e7e5fe;
    --accent-wash: transparent;
    --on-accent: #2b2741;
    --neutral: #5c6070;  --neutral-2: #7d8496;
    --ok:    #2c6a52;  --ok-bg:   #e6f2ec;  --ok-fg:   #245a45;
    --warn:  #8a640f;  --warn-bg: #f8efd9;  --warn-fg: #71510c;
    --error: #a33f3f;  --err-bg:  #fbe9e9;  --err-fg:  #8c3535;
    --shadow-sm: 0 0 0 1px var(--line);
    --shadow-md: 0 0 0 1px var(--line);
    --shadow-lg: 0 0 0 1px var(--line);
  }
}