/* GranuScan — socle de valeurs. Aucune règle ici, uniquement des variables.
   theme.css et screens.css n'écrivent jamais de valeur brute : tout passe par
   ce fichier, pour qu'un réaccord de l'interface tienne en un seul endroit. */

:root {
  /* ---------- couleurs ---------- */
  --paper:      oklch(0.975 0.015 250);
  --surface:    oklch(0.995 0.004 250);
  --surface-2:  oklch(0.945 0.022 250);
  --ink:        oklch(0.29 0.055 255);
  --ink-2:      oklch(0.37 0.048 255);
  --muted:      oklch(0.47 0.038 255);
  --line:       oklch(0.86 0.025 250);
  --line-2:     oklch(0.76 0.045 250);

  /* Accent cyan, menthe et ambre : les états métier sont immédiatement lisibles. */
  --accent:     oklch(0.58 0.19 250);
  --accent-ink: oklch(0.43 0.17 250);
  --accent-sft: oklch(0.92 0.055 250);
  --accent-dk:    oklch(0.50 0.19 250);
  --accent-rng:   oklch(0.58 0.19 250 / 0.20);
  /* Blanc voilé, pour une pastille posée sur l'accent plein : elle doit se
     détacher du fond sans virer au blanc franc, réservé au texte. */
  --accent-voile: oklch(1 0 0 / 0.22);
  --accent-rng-md: oklch(0.58 0.19 250 / 0.30);
  --btn-glow:     0 2px 8px var(--accent-rng);
  --btn-glow-md:  0 4px 16px var(--accent-rng-md);

  --ok:         oklch(0.52 0.15 155);
  --ok-sft:     oklch(0.93 0.055 155);
  --warn:       oklch(0.60 0.15 75);
  --warn-sft:   oklch(0.94 0.065 75);

  /* Déclinaisons texte des états : --ok et --warn servent aux pastilles et aux
     fonds, où leur clarté convient ; en texte elles tombent sous 4,5:1 sur
     --paper comme sur --ok-sft / --warn-sft. Toujours écrire avec -ink. */
  --ok-ink:     oklch(0.44 0.14 155);
  --warn-ink:   oklch(0.45 0.12  62);

  --on-accent:  oklch(1     0       0);
  --on-ink:     oklch(0.99 0.005 250);
  --on-sidebar: oklch(0.29 0.055 255);
  /* Texte secondaire sur le dégradé de la sidebar : --muted y perd trop de
     contraste, le dégradé étant plus sombre que --paper. */
  --on-sidebar-2: oklch(0.40 0.050 265);

  /* Teintes de la planche segmentée. Distinctes du châssis et accordées aux
     figures PNG tracées côté serveur par matplotlib : ne pas les réaccorder
     sans reprendre figures/. */
  --poly:       oklch(0.55 0.16 258 / 0.18);
  --poly-hi:    oklch(0.55 0.16 258 / 0.35);
  --poly-ln:    oklch(0.62 0.18 258);
  --poly-sel:   oklch(0.78 0.14  62 / 0.30);
  --poly-selln: oklch(0.82 0.14  62);
  --fig-ln:     oklch(0.62 0.18 258);
  --fig-fill:   oklch(0.62 0.18 258 / 0.18);
  --fig-mk:     oklch(0.78 0.14  62);

  /* ---------- sidebar ---------- */
  --sidebar-from: oklch(0.93 0.070 290);
  --sidebar-to:   oklch(0.89 0.075 235);

  /* ---------- connexion : la planche, son parcours et son socle ----------
     La page de connexion pose une photographie de paillasse sur toute sa moitié
     gauche. Le voile la blanchit à gauche, sous le titre et le parcours, et la
     laisse intacte à droite : le texte se lit sur du papier, la photographie
     reste une photographie. Le socle est la bande sombre du bas, qui porte les
     trois chiffres et ferme la planche sur l'encre. */
  --plate-bg:        oklch(0.985 0.010 250);
  --plate-veil-fort: oklch(0.995 0.006 250 / 0.96);
  --plate-veil-mi:   oklch(0.995 0.006 250 / 0.74);
  --plate-veil-fin:  oklch(0.995 0.006 250 / 0.12);
  --plate-veil-haut: oklch(0.995 0.006 250 / 0.55);
  --on-plate:        oklch(0.29 0.055 255);
  --on-plate-2:      oklch(0.45 0.040 255);
  --plate-rule:      oklch(0.78 0.035 250 / 0.60);

  /* Les pions du parcours : un disque de papier cerné, l'icône à l'accent. */
  --pion-bg:     oklch(0.995 0.004 250 / 0.88);
  --pion-line:   oklch(0.83 0.055 250);
  --pion-fleche: oklch(0.66 0.045 255);

  --socle-bg:    oklch(0.24 0.055 258);
  --socle-ink:   oklch(0.98 0.006 250);
  --socle-ink-2: oklch(0.80 0.025 250);
  --socle-rule:  oklch(0.98 0.006 250 / 0.16);
  --socle-icone: oklch(0.74 0.105 250);

  /* Les deux disques pâles qui débordent du guichet, en haut et en bas à droite. */
  --halo: oklch(0.93 0.045 250 / 0.55);

  /* ---------- topbar ---------- */
  --topbar-bg: oklch(0.985 0.012 250);
  --canvas-glow: oklch(0.73 0.13 240 / 0.15);

  /* ---------- cartes ---------- */
  --card-border-accent: oklch(0.58 0.19 250 / 0.32);

  /* ---------- ombres colorées ---------- */
  --glow-accent: 0 8px 24px oklch(0.58 0.19 250 / 0.16);
  --glow-ok:     0 8px 20px oklch(0.52 0.15 155 / 0.14);
  --glow-warn:   0 8px 20px oklch(0.60 0.15 75 / 0.14);
  --status-ring: 0 0 0 3px var(--ok-sft);
  --nav-scrim:   oklch(0.29 0.055 255 / 0.24);

  /* ---------- typographie ----------
     Les titres sont en linéale ; la serif ne sert plus qu'au « G » de la
     marque, où elle est un dessin de logo et non du texte. */
  --f-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-sans:    "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 34px;
  --fs-h2:      19px;
  --fs-h3:      13.5px;
  --fs-body:    13.5px;
  --fs-sm:      12px;
  --fs-tiny:    11px;
  --fs-caps:    10px;
  --fs-metric:  27px;
  --fs-num:     12.5px;
  --fs-hero:    38px;
  --fs-porte:   clamp(30px, 3.4vw, 46px);
  --fs-lg:      21px;
  --fs-glabel:   8px;
  --fs-marque:  clamp(19px, 1.75vw, 25px);
  --fs-md:      14.5px;

  --lh-display: 1.12;
  --lh-h2:      1.25;
  --lh-body:    1.55;

  --tr-display: -0.01em;
  --tr-metric:  -0.02em;
  --tr-caps:     0.11em;

  /* ---------- espacement ---------- */
  --s0:  2px;
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* ---------- formes ---------- */
  --r1:  8px;
  --r2: 12px;
  --r3: 999px;
  --hairline: 1px;

  /* ---------- élévation ---------- */
  --e1: 0 1px 3px oklch(0.29 0.055 255 / 0.08), 0 2px 6px oklch(0.29 0.055 255 / 0.05);
  --e2: 0 6px 16px oklch(0.29 0.055 255 / 0.12), 0 12px 32px oklch(0.29 0.055 255 / 0.07);
  --e3: 0 12px 28px oklch(0.29 0.055 255 / 0.16), 0 28px 56px oklch(0.29 0.055 255 / 0.10);
  --inset: inset 0 1px 2px oklch(0.29 0.055 255 / 0.10);
  --ring: 0 0 0 3px var(--accent-rng);

  /* ---------- mouvement ---------- */
  --t-fast: 100ms;
  --t-base: 120ms;
  --t-slow: 350ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------- gabarit ---------- */
  --rail:      228px;
  --rail-mini:  56px;
  --topbar:     56px;
  --ctrl:       34px;
  --ctrl-sm:    28px;
  --ctrl-lg:    44px;
  --page-max: 1240px;
  --page-ample: 1560px;
  --vignette-l:  66px;
  --vignette-h:  38px;
  /* Le fil d'étapes : largeur d'une fiche et côté de son pictogramme. */
  --etape-l:   200px;
  --etape-pic:  30px;
  /* Gouttière latérale de la page. Les décors d'écran qui débordent jusqu'au
     bord s'y accrochent ; les paliers d'adaptation la redéfinissent sur .main. */
  --marge-page: var(--s6);
  --pastille-tete: 40px;

  /* Calibration : valeurs de la référence, partagées par ses panneaux et outils. */
  --calib-titre: 28px;
  --calib-sous-titre: 17px;
  --calib-chevron: 26px;
  --calib-outil-padding: 10px;
  --calib-image-padding-haut: 6px;
  --calib-marge: 18px;
  --calib-resume-padding: 20px;
  --calib-note-padding: 14px;
  --calib-image-fond: #191c1d;
  --calib-outil-fond: #343a40;
  --calib-outil-encre: #fff;

  /* Noir plein d'un masque : c'est un opérateur de découpe, pas une couleur —
     rien à réaccorder, mais rien à écrire en dur non plus. */
  --masque-plein: oklch(0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}

/* La palette de calibration reste limitée à cet écran. */
.app:has([data-ecran="calibration"]) {
  --accent-sft: #edf6ff;
  --sidebar-from: #f0f7ff;
  --sidebar-to: #dfedfc;
}