/**
 * unrecon-theme.css — source unique du thème Unrecon.
 *
 * À importer en premier sur chaque site : vitrine, panel client,
 * documentation, page de statut. Aucune valeur de couleur, de rayon
 * ou de durée ne doit être écrite en dur ailleurs — si une valeur
 * manque ici, c'est ici qu'on l'ajoute.
 *
 * Thème clair par défaut. Le thème sombre s'active avec
 * <html data-theme="dark">, ou automatiquement selon la préférence
 * système si aucun attribut n'est posé (voir plus bas).
 */

:root {

  /* Marque — figées, jamais redéfinies par thème */
  --u-blue: #5592FF;
  --u-cyan: #00BBFF;
  --u-gradient: linear-gradient(135deg,#5592FF 0%,#00BBFF 100%);
  --on-accent: #0C1117;
  --danger-solid: #E12F35;

  /* Mouvement */
  --t-fast: .16s;
  --t-slow: .3s;
  --ease: cubic-bezier(.2,0,0,1);

  /* Rayons */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Espacement — base 4 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;

  /* Typographie */
  --font-display: 'Nexa','Century Gothic',system-ui,sans-serif;
  --font-body: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono: 'JetBrains Mono','SF Mono',Consolas,monospace;
}

/* ---------- Thème clair ---------- */
:root,
:root[data-theme="light"] {

  /* Encre — accents lisibles */
  --accent: #007FAD;
  --accent-2: #1A6CFF;
  --ring: #009FD9;
  --ink: #0C1117;
  --on-ink: #FFFFFF;

  /* Teintes sur fond teinté */
  --accent-on-tint: #0078A4;
  --accent-2-on-tint: #0B62FF;
  --ok-on-tint: #0B7F59;
  --warn-on-tint: #9D6308;

  /* Sémantique */
  --ok: #0C875E;
  --warn: #A66908;
  --danger: #E12F35;

  /* Surfaces et texte */
  --bg: #FFFFFF;
  --bg-sub: #F5F8FB;
  --surface: #FFFFFF;
  --surface-2: #F0F4F9;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --text: #333333;
  --text-2: #5A6472;
  --text-3: #68788D;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(20,30,45,.06);
  --shadow-md: 0 4px 16px -4px rgba(20,30,45,.10);
  --shadow-glow: 0 8px 32px -8px rgba(0,187,255,.35);

  /* Graphes — catégoriel */
  --c1: #0045E7;
  --c2: #009FD9;
  --c3: #0C9792;
  --c4: #9772EE;
  --c5: #AF2EC3;
  --c6: #6D84A2;
  --c7: #DA63B7;
  --c8: #6E6420;

  /* Graphes — séquentiel */
  --q1: #C3ECFD;
  --q2: #7ED6FC;
  --q3: #38C0FA;
  --q4: #06A2E5;
  --q5: #04719F;
  --q6: #034663;

  /* Graphes — divers */
  --grid: #E2E8F0;
  --gradient-text: linear-gradient(135deg,#1A6CFF 0%,#007FAD 100%);
}

/* ---------- Thème sombre ---------- */
:root[data-theme="dark"] {

  /* Encre — accents lisibles */
  --accent: #00BBFF;
  --accent-2: #5592FF;
  --ring: #00BBFF;
  --ink: #E9EFF5;
  --on-ink: #0C1117;

  /* Teintes sur fond teinté */
  --accent-on-tint: #00BBFF;
  --accent-2-on-tint: #5592FF;
  --ok-on-tint: #10B981;
  --warn-on-tint: #F5A524;

  /* Sémantique */
  --ok: #10B981;
  --warn: #F5A524;
  --danger: #E85F63;

  /* Surfaces et texte */
  --bg: #0C1117;
  --bg-sub: #11181F;
  --surface: #151D26;
  --surface-2: #1C2733;
  --border: #26323F;
  --border-strong: #3A4857;
  --text: #E9EFF5;
  --text-2: #A2B0BF;
  --text-3: #6D7D90;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 20px -4px rgba(0,0,0,.55);
  --shadow-glow: 0 8px 36px -8px rgba(0,187,255,.45);

  /* Graphes — catégoriel */
  --c1: #3572FF;
  --c2: #59D3FF;
  --c3: #0FBDB7;
  --c4: #A17FEF;
  --c5: #DFA1E9;
  --c6: #8D9EB6;
  --c7: #D857B1;
  --c8: #C2AF38;

  /* Graphes — séquentiel */
  --q1: #034663;
  --q2: #04719F;
  --q3: #06A2E5;
  --q4: #38C0FA;
  --q5: #7ED6FC;
  --q6: #C3ECFD;

  /* Graphes — divers */
  --grid: #26323F;
  --gradient-text: linear-gradient(135deg,#5592FF 0%,#00BBFF 100%);
}

/* ---------- Préférence système ---------- */
/* Si aucun data-theme n'est posé sur <html>, on suit l'OS.
   Dès que l'attribut existe, il gagne : le choix explicite prime. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --accent: #00BBFF;
    --accent-2: #5592FF;
    --ring: #00BBFF;
    --ink: #E9EFF5;
    --on-ink: #0C1117;
    --accent-on-tint: #00BBFF;
    --accent-2-on-tint: #5592FF;
    --ok-on-tint: #10B981;
    --warn-on-tint: #F5A524;
    --ok: #10B981;
    --warn: #F5A524;
    --danger: #E85F63;
    --bg: #0C1117;
    --bg-sub: #11181F;
    --surface: #151D26;
    --surface-2: #1C2733;
    --border: #26323F;
    --border-strong: #3A4857;
    --text: #E9EFF5;
    --text-2: #A2B0BF;
    --text-3: #6D7D90;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 20px -4px rgba(0,0,0,.55);
    --shadow-glow: 0 8px 36px -8px rgba(0,187,255,.45);
    --c1: #3572FF;
    --c2: #59D3FF;
    --c3: #0FBDB7;
    --c4: #A17FEF;
    --c5: #DFA1E9;
    --c6: #8D9EB6;
    --c7: #D857B1;
    --c8: #C2AF38;
    --q1: #034663;
    --q2: #04719F;
    --q3: #06A2E5;
    --q4: #38C0FA;
    --q5: #7ED6FC;
    --q6: #C3ECFD;
    --grid: #26323F;
    --gradient-text: linear-gradient(135deg,#5592FF 0%,#00BBFF 100%);
  }
}

/* ---------- Grille ---------- */
:root {
  --container: 1080px;      /* vitrine et documentation */
  --container-wide: 1440px; /* panel client, tableaux larges */
  --gutter: 24px;
  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1440px;
  --measure: 72ch;          /* longueur de ligne maximale en lecture */
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;      /* Nexa n'existe qu'en Light : ne jamais demander plus */
  letter-spacing: .01em;
  margin: 0;
}

/* Nexa au-dessus de 20px seulement. En dessous, Inter reprend la main. */
h4, h5, h6 { font-family: var(--font-body); font-weight: 600; margin: 0; }

code, kbd, samp, pre { font-family: var(--font-mono); }

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Cibles tactiles : 44px minimum sur les commandes isolées. */
button, [role="button"], select, summary { min-height: 44px; }

/* Chiffres alignés dans les tableaux et les montants. */
.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Rappels d'usage ----------

   1. Le cyan et le bleu de marque ne portent jamais de texte sur fond
      clair : ils remplissent, ils bordent. Pour du texte, --accent.
   2. Un aplat de marque qui doit porter du texte le porte en
      --on-accent, jamais en blanc.
   3. Le rouge est réservé aux incidents. Une jauge pleine s'assombrit
      (--q4 → --q6), elle ne rougit pas.
   4. --c7 et --c8 ne s'utilisent pas sur un écran où des badges de
      statut sont visibles.
   5. Six séries maximum par graphe, même si la palette en offre huit.
*/