:root{
  /* --- Palette ATRYON-like --- */
  --brand-1:#2563eb;            /* bleu profond */
  --brand-2:#22d3ee;            /* cyan */
  --brand:#2563eb;
  --bg:#ffffff;                 /* fond */
  --fg:#0f172a;                 /* texte principal */
  --muted:#f1f5f9;              /* surfaces claires */
  --muted-fg:#64748b;           /* texte secondaire */
  --border:#e2e8f0;             /* bordures */
  --success:#10b981; --warning:#f59e0b; --danger:#ef4444;

  /* --- Tokens UI --- */
  --radius-sm:10px; --radius:16px; --radius-lg:22px;
  --shadow-sm:0 3px 14px rgba(2,6,23,.08);
  --shadow:0 10px 34px rgba(2,6,23,.12);
  --container:1160px;

  /* --- Espacements --- */
  --s1:8px; --s2:12px; --s3:16px; --s4:20px; --s5:28px; --s6:40px;

  /* --- Dégradés --- */
  --grad-brand:linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 100%);
  --grad-soft:linear-gradient(180deg, rgba(37,99,235,.08) 0%, rgba(34,211,238,.05) 100%);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --fg:#e2e8f0;
    --muted:#0f172a;
    --muted-fg:#9aa7bd;
    --border:#1e293b;
    --shadow-sm:0 3px 14px rgba(0,0,0,.35);
    --shadow:0 10px 34px rgba(0,0,0,.45);
  }
}

/* Option "forcée" (si un jour tu ajoutes un bouton thème) */
[data-theme="dark"]{
  --bg:#0b1220; --fg:#e2e8f0; --muted:#0f172a; --muted-fg:#9aa7bd; --border:#1e293b;
  --shadow-sm:0 3px 14px rgba(0,0,0,.35); --shadow:0 10px 34px rgba(0,0,0,.45);
}
[data-theme="light"]{
  --bg:#ffffff; --fg:#0f172a; --muted:#f1f5f9; --muted-fg:#64748b; --border:#e2e8f0;
  --shadow-sm:0 3px 14px rgba(2,6,23,.08); --shadow:0 10px 34px rgba(2,6,23,.12);
}