/* Jetons du tableau de bord — la grammaire visuelle, en variables.
 *
 * Ce fichier est une ENTRÉE du travail, pas une sortie : il se lit, il ne se
 * réécrit pas. Les valeurs viennent du design system StockFlow, avec deux
 * écarts assumés, expliqués dans LISEZMOI.md : l'accent et la densité.
 *
 * Tout ce qui est dessiné dans reference.html n'utilise que ces variables.
 * Une valeur codée en dur dans une feuille de style est un écart à signaler,
 * pas une liberté.
 */

@import url("polices/polices.css");

:root {
  color-scheme: light;

  /* ---- surfaces et textes : neutres chauds ---- */
  --fond: oklch(0.985 0.005 85);          /* fond de page */
  --encre: oklch(0.155 0.005 260);        /* texte principal */
  --carte: oklch(1 0.002 85);             /* fond des cartes */
  --doux: oklch(0.955 0.008 80);          /* fond des zones secondaires, survol */
  --estompe: oklch(0.52 0.008 260);       /* texte secondaire — 4,5:1 sur --fond */
  --trait: oklch(0.90 0.005 80);          /* bordures */
  --trait-saisie: oklch(0.94 0.005 80);   /* bordure des champs au repos */
  --rail: oklch(0.975 0.005 80);          /* fond de la barre latérale */
  --rail-encre: oklch(0.30 0.005 260);    /* texte de la barre latérale */

  /* ---- accent : un seul, et il n'est pas décoratif ----
     Il marque l'action principale et l'élément actif. Deux accents sur un
     écran, c'est qu'on ne sait plus lequel est l'action principale. */
  --accent: oklch(0.55 0.16 30);
  --accent-encre: oklch(0.99 0.005 85);
  --accent-survol: oklch(0.49 0.16 30);
  --accent-doux: color-mix(in oklch, oklch(0.55 0.16 30) 10%, var(--fond));

  /* ---- statuts : badges, pastilles, messages — jamais du décor ---- */
  --succes: oklch(0.68 0.14 160);
  --succes-encre: oklch(0.45 0.12 160);
  --alerte: oklch(0.76 0.16 75);
  --alerte-encre: oklch(0.48 0.12 75);
  --erreur: oklch(0.58 0.20 25);

  /* ---- typographie ---- */
  --police: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-page: 1.75rem;      /* 28px — titre de page, un seul par écran */
  --t-carte: 1.0625rem;   /* 17px — titre de carte ou de section */
  --t-corps: 0.9375rem;   /* 15px — texte courant, libellés, boutons */
  --t-petit: 0.875rem;    /* 14px — aides, métadonnées */
  --t-menu: 0.8125rem;    /* 13px — états, compteurs */
  --t-oeil: 0.6875rem;    /* 11px — intertitres de la barre latérale, capitales */

  --gras-moyen: 500;
  --gras-fort: 600;
  --serrage: -0.025em;    /* sur les titres uniquement */
  --ecartement: 0.05em;   /* sur les capitales uniquement */
  --interligne: 1.55;

  /* ---- espacement : grille de 4 px ---- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;    /* gouttière entre cartes, padding interne d'une petite carte */
  --e5: 20px;    /* padding d'une carte */
  --e6: 24px;    /* entre deux groupes */
  --e8: 32px;    /* marge de page */

  /* ---- rayons ---- */
  --r-petit: 7px;    /* vignettes, étiquettes */
  --r-moyen: 10px;   /* éléments de menu */
  --r-grand: 12px;   /* boutons, champs */
  --r-carte: 17px;   /* cartes, encadrés */
  --r-pilule: 999px; /* pastilles d'état */

  /* ---- densité : un commerçant, pas un opérateur ----
     44 px est un plancher, pas une cible à viser au plus juste. */
  --h-controle: 44px;   /* boutons et champs */
  --h-menu: 40px;       /* ligne de la barre latérale */
  --l-rail: 232px;      /* largeur de la barre latérale */
  --l-page: 1180px;     /* largeur maximale du contenu */

  /* ---- mouvement ---- */
  --duree: 200ms;
  --courbe: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- focus clavier : visible partout, jamais supprimé ----
     L'anneau est sombre, pas coloré à l'accent : l'accent est à deux degrés de
     teinte de --erreur, un anneau terre cuite se lirait comme une erreur. */
  --focus: 3px solid var(--encre);
  --focus-ecart: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duree: 0ms; }
}