@import url('/fonts/polices.css');

/* =========================================================================
   Jetons de conception — Groupe Scolaire SANKI
   Palette indigo bogolan / safran (l'argent) / jade (soldé) / brique (impayé).
   ========================================================================= */

:root {
  color-scheme: light;

  --papier: #eceff6;
  --papier-creux: #e2e6f0;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eef1f8;
  --encre: #0e1526;
  --encre-2: #46506a;
  --encre-3: #7b849c;
  --trait: #d8dde9;
  --trait-fort: #c2c9da;

  --indigo: #2a3b94;
  --indigo-clair: #4f61c4;
  --indigo-voile: #e7eaf8;
  --safran: #b96f06;
  --safran-vif: #e08a12;
  --safran-voile: #fdf0dc;
  --jade: #0f7d61;
  --jade-voile: #dff2ec;
  --brique: #b3372a;
  --brique-voile: #fbe6e3;
  --prune: #7c3168;

  --ombre-1: 0 1px 2px rgb(14 21 38 / 6%), 0 1px 1px rgb(14 21 38 / 4%);
  --ombre-2: 0 4px 16px -4px rgb(14 21 38 / 12%), 0 2px 4px -2px rgb(14 21 38 / 6%);
  --ombre-3: 0 24px 60px -20px rgb(14 21 38 / 32%), 0 8px 20px -12px rgb(14 21 38 / 18%);

  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --corps: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  --chiffres: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --rail: 250px;
  --barre: 60px;
}

:root[data-theme='sombre'] {
  color-scheme: dark;

  --papier: #080c17;
  --papier-creux: #05080f;
  --surface: #111827;
  --surface-2: #182034;
  --surface-3: #1f2941;
  --encre: #e6ebf7;
  --encre-2: #a3aec8;
  --encre-3: #737e99;
  --trait: #263149;
  --trait-fort: #35425e;

  --indigo: #8194f0;
  --indigo-clair: #a3b1f6;
  --indigo-voile: #1b2547;
  --safran: #efa63f;
  --safran-vif: #f7bb62;
  --safran-voile: #33240d;
  --jade: #3cc79c;
  --jade-voile: #0d2f27;
  --brique: #f0796a;
  --brique-voile: #33150f;
  --prune: #d18ac0;

  --ombre-1: 0 1px 2px rgb(0 0 0 / 40%);
  --ombre-2: 0 6px 20px -6px rgb(0 0 0 / 55%);
  --ombre-3: 0 28px 70px -24px rgb(0 0 0 / 75%);
}

/* ------------------------------------------------------------------ Base */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}

h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 0.6em; }

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--indigo); color: #fff; }

:focus-visible {
  outline: 2px solid var(--indigo-clair);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Barres de défilement discrètes */
* { scrollbar-width: thin; scrollbar-color: var(--trait-fort) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--trait-fort); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ Typographie utilitaire */

.chiffre {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.etiquette {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.discret { color: var(--encre-2); }
.tres-discret { color: var(--encre-3); }
.petit { font-size: 12.5px; }
.gras { font-weight: 600; }
.centre { text-align: center; }
.droite { text-align: right; }
.nowrap { white-space: nowrap; }

.positif { color: var(--jade); }
.negatif { color: var(--brique); }
.argent { color: var(--safran); }

.pile { display: flex; flex-direction: column; }
.ligne { display: flex; align-items: center; }
.espace { flex: 1; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g24 { gap: 24px; }

.masque { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}