/* Design tokens — identité visuelle « cuivre » (voir
   DECISIONS_IDENTITE_VISUELLE.md) : remplace la palette GitHub-Dark
   héritée telle quelle de l'ancienne interface vanilla-JS par un dark mode
   recalé sur une teinte chaude, avec un accent de marque propre au produit
   plutôt que le bleu générique d'origine. Échelle d'espacement,
   typographique et tokens de transition inchangés dans leur structure.
   Palette dataviz catégorielle (--series-*) volontairement non retouchée
   ici — sa validation ΔE (skill dataviz) était faite contre l'ancienne
   surface #0d1117 ; à revalider si l'écart de luminosité avec la nouvelle
   surface #14110f s'avère perceptible (cf DECISIONS_IDENTITE_VISUELLE.md
   §5, point ouvert). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Couleurs — dark chaud (teinte cuivre) plutôt que le bleu-gris neutre
     GitHub d'origine. */
  --bg:         #14110f;
  --surface:    #1e1916;
  --surface2:   #29221e;
  /* Cran d'élévation intermédiaire entre --surface2 et les popovers/modales
     — sert à distinguer une carte plate d'un élément flottant au-dessus
     (menu, tooltip) sans dépendre uniquement de l'ombre portée. */
  --surface3:   #332b25;
  --border:     #3d332c;
  --text:       #f2ede6;
  --muted:      #a89a8a;
  /* Accent de marque — cuivre, remplace l'ancien --blue GitHub (#388bfd).
     Conservé sous ce nom historique dans les composants qui l'utilisaient
     déjà pour un rôle "primaire/actif" générique (boutons, onglets actifs,
     focus) — voir components.css. */
  --accent:     #c17a3e;
  --accent-dim: #3a2a18;
  --green:      #4f9d4f;
  --green-dim:  #1f3320;
  --orange:     #c98a2e;
  --orange-dim: #3a2a12;
  --red:        #d9534f;
  --red-dim:    #3a1f1c;
  /* Couleur de texte sur fond saturé (boutons pleins) — indépendante du
     thème clair/sombre, donc pas une simple relecture de --text/--bg. */
  --on-accent:  #fff;
  --on-success: #14110f;

  /* Rayons */
  --radius:     8px;
  --radius-sm:  6px;

  /* Espacement */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Typographie */
  --text-xs:   .75rem;
  --text-sm:   .85rem;
  --text-base: .95rem;
  --text-lg:   1.1rem;
  --text-xl:   1.5rem;
  /* Valeurs héro (KPI, titres de page) — au-dessus de --text-xl. */
  --text-2xl:  1.875rem;
  /* Chiffre héro du dashboard CA (.hero-ca-value) — au-dessus de --text-2xl. */
  --text-3xl:  2.75rem;

  --leading-tight:  1.2;
  --leading-normal: 1.5;

  /* Typographie — 2 rôles + 1 utilitaire, auto-hébergées (voir fonts.css).
     Display réservée aux titres/hero (usage restreint) ; corps partout
     ailleurs ; mono uniquement pour les montants qui s'empilent
     verticalement (tableaux, blocs KPI) où l'alignement des chiffres est
     un vrai besoin fonctionnel, pas seulement esthétique. */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* Élévation — remplace les `box-shadow: rgba(...)` codés en dur qui
     existaient déjà (popovers de nav/calendrier/multiselect, tooltips de
     graphique) : mêmes valeurs, juste nommées, pour pouvoir les réutiliser
     ailleurs (cartes, modales) de façon cohérente. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4);

  /* Transitions */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Points de rupture — documentés ici pour référence, mais utilisés comme
     littéraux dans les @media (les custom properties ne sont pas
     utilisables directement dans une media query) :
       --bp-sm: 600px  (@media max-width: 600px)
       --bp-md: 900px  (@media max-width: 900px)
       --bp-lg: 1200px (nouveau seuil de repli de la sidebar en rail d'icônes) */

  /* Data viz — palette catégorielle validée (skill dataviz), variante
     sombre, re-validée contre la surface réelle de pos-admin (#0d1117) :
     CVD adjacent le pire écart ΔE 10.3 (bande plancher 8–12) => les
     graphiques à ≥2 séries portent systématiquement des étiquettes
     directes, jamais la couleur seule. */
  --chart-grid:          var(--border);
  --chart-baseline:      #383835;
  --series-1:            #3987e5; /* bleu */
  --series-2:            #199e70; /* aqua */
  --series-3:            #c98500; /* jaune */
  --series-4:            #008300; /* vert */
  --series-5:            #9085e9; /* violet */
  --series-6:            #e66767; /* rouge */
  --series-7:            #d55181; /* magenta */
  --series-8:            #d95926; /* orange */
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  /* Hauteur fixe : l'app tient sur un seul écran — chaque vue à tableau
     gère elle-même l'espace disponible pour ne jamais scroller (voir
     .app-shell/.container/.section/.table-wrap dans components.css).
     overflow-y reste en secours (auto, pas hidden) plutôt qu'une garantie
     stricte : les quelques vues non tabulaires pas encore couvertes par la
     pagination (ex. devices.rs) doivent pouvoir défiler plutôt que de voir
     leur contenu excédentaire silencieusement rogné. */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }

a { color: inherit; }