/* Brimline : jetons du site, palette validée en L0 (QUOTA-12). Le site a ses propres jetons : le design/tokens.json
   de l'app garde une palette plus ancienne et n'est pas la source de ce fichier (QUOTA-30).
   Clair par défaut, sombre par prefers-color-scheme. Pile de polices système : aucune requête externe. */

:root {
  color-scheme: light dark;

  /* Couleurs, clair. Palette validée en L0 (QUOTA-12) ; chaque paire texte sur fond est mesurée par tests/test_contrast.py. */
  --sg-bg: #F4F8F8;
  --sg-bg-2: #E8F1F5;          /* bas du dégradé de la page */
  --sg-surface: #FFFFFF;
  --sg-surface-2: #F8FBFB;     /* surface « verre » : cartes, en-tête */
  --sg-band: rgb(255 255 255 / 0.55); /* bandeau d'une section sur le dégradé */
  --sg-text: #10181C;          /* 16.8:1 sur fond */
  --sg-text-2: #465660;        /* 7.1:1 sur fond */
  --sg-border: #CFDADD;
  --sg-track: #E1EAEC;
  --sg-accent: #0A6470;        /* 6.0:1 sur le bas du dégradé */
  --sg-accent-2: #5B47C9;      /* violet : dégradés et halos, jamais le texte courant */
  --sg-gauge-ok: #0F7A83;      /* marge, moins de 70 % */
  --sg-gauge-warn: #955300;    /* attention, 70 à moins de 90 % */
  --sg-gauge-crit: #BC2B26;    /* critique, 90 % et plus */
  --sg-gauge-muted: rgb(70 86 96 / 0.55); /* expiré */
  --sg-page-bg: linear-gradient(180deg, var(--sg-bg) 0%, var(--sg-bg-2) 100%);
  --sg-halo-1: radial-gradient(60% 45% at 85% 0%, rgb(10 100 112 / 0.16), transparent 70%);
  --sg-halo-2: radial-gradient(50% 40% at 0% 30%, rgb(91 71 201 / 0.14), transparent 70%);
  --sg-button-bg: linear-gradient(135deg, var(--sg-accent), var(--sg-accent-2));
  --sg-shadow: 0 1px 2px rgb(16 24 28 / 0.06), 0 8px 24px rgb(16 24 28 / 0.08);

  /* Typographie */
  --sg-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sg-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sg-text-xs: 0.8125rem;   /* 13 px : notes, légendes */
  --sg-text-s: 0.9375rem;    /* 15 px : interface, tableaux */
  --sg-text-m: 1.0625rem;    /* 17 px : corps */
  --sg-text-l: 1.375rem;     /* 22 px : intertitres */
  --sg-text-xl: 2rem;        /* 32 px : titres de section */
  --sg-text-xxl: clamp(2.5rem, 6vw, 4rem); /* titre d'accueil */
  --sg-leading: 1.55;
  --sg-leading-tight: 1.15;

  /* Espacements (grille de 4) */
  --sg-space-xxs: 2px;
  --sg-space-xs: 4px;
  --sg-space-s: 8px;
  --sg-space-m: 12px;
  --sg-space-l: 16px;
  --sg-space-xl: 24px;
  --sg-space-xxl: 32px;
  --sg-space-3xl: 48px;
  --sg-space-4xl: 64px;

  /* Rayons */
  --sg-radius-control: 6px;
  --sg-radius-card: 10px;
  --sg-radius-page: 16px;

  /* Mesures */
  --sg-gauge-h: 8px;
  --sg-gauge-h-hero: 10px;
  --sg-max: 1080px;
  --sg-measure: 680px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sg-bg: #0C1214;
    --sg-bg-2: #111C24;
    --sg-surface: #162024;
    --sg-surface-2: #1B272C;
    --sg-band: rgb(27 39 44 / 0.55);
    --sg-text: #EAF2F4;        /* 16.6:1 sur fond */
    --sg-text-2: #9DB0B8;      /* 8.4:1 sur fond */
    --sg-border: #2B3A40;
    --sg-track: #25323A;
    --sg-accent: #5CD0D8;      /* 9.4:1 sur le bas du dégradé */
    --sg-accent-2: #A99DFF;
    --sg-gauge-ok: #3BC0C6;
    --sg-gauge-warn: #F0A93F;
    --sg-gauge-crit: #FF7064;
    --sg-gauge-muted: rgb(157 176 184 / 0.55);
    --sg-halo-1: radial-gradient(60% 45% at 85% 0%, rgb(92 208 216 / 0.16), transparent 70%);
    --sg-halo-2: radial-gradient(50% 40% at 0% 30%, rgb(169 157 255 / 0.14), transparent 70%);
    --sg-button-bg: var(--sg-accent);
    --sg-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  }
}

/* Jauge de référence pour le site :
   <div class="sg-gauge" data-level="warn" style="--value: .72" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" aria-label="Semaine"></div>
   data-level : ok | warn | crit | expired | unavailable | empty (0 %, aucun liquide). Le pourcentage s'écrit toujours en texte à côté. */
.sg-gauge {
  position: relative;
  height: var(--sg-gauge-h);
  border-radius: 999px;
  background:
    linear-gradient(var(--sg-border), var(--sg-border)) calc(70% - 0.5px) 0 / 1px 100% no-repeat,
    linear-gradient(var(--sg-border), var(--sg-border)) calc(90% - 0.5px) 0 / 1px 100% no-repeat,
    var(--sg-track);
  box-shadow: inset 0 0 0 0.5px var(--sg-border);
  overflow: hidden;
}
.sg-gauge::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: max(var(--sg-gauge-h), calc(var(--value, 0) * 100%));
  border-radius: inherit;
  background: var(--sg-gauge-ok);
}
.sg-gauge[data-level="warn"]::after { background: var(--sg-gauge-warn); }
.sg-gauge[data-level="crit"]::after { background: var(--sg-gauge-crit); }
.sg-gauge[data-level="expired"]::after { background: var(--sg-gauge-muted); }
.sg-gauge[data-level="empty"]::after,
.sg-gauge[data-level="unavailable"]::after { display: none; }
.sg-gauge[data-level="unavailable"] { background: transparent; box-shadow: none; outline: 1px dashed var(--sg-border); outline-offset: -1px; }

.sg-num { font-variant-numeric: tabular-nums; font-weight: 600; }