/* variables.css — palette et tokens Instaclasse V2 (charte "verre sombre") */
:root {
  /* fond & texte — sombre par défaut (thème "système") */
  --bg: #0A0C16;
  --bg-soft: #0D1020;
  --bg-glow: radial-gradient(60% 45% at 50% 22%, rgba(108, 92, 231, 0.16), transparent 70%);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-alt: rgba(255, 255, 255, 0.075);
  --surface-solid: #151830;
  --text: #F3F1FC;
  --text-muted: #9A96B8;
  --border: rgba(158, 150, 224, 0.22);
  --border-soft: rgba(255, 255, 255, 0.08);

  /* identité — dégradé indigo / violet / rose (disque + éléments actifs) */
  --primary-1: #5B4FE0;
  --primary-2: #8B7CF6;
  --primary-3: #C79CFA;
  --primary: #7C6FF0;
  --primary-strong: #6C5CE7;
  --primary-soft: rgba(139, 124, 246, 0.35);
  --accent: #F5A623;
  --accent-2: #F2707A;

  /* feux bruit */
  --state-ok: #3ED598;
  --state-warn: #F5C147;
  --state-bad: #F2707A;

  --danger: #F2707A;
  --focus-ring: #A79BFA;

  /* palette des minuteurs multiples */
  --timer-color-1: #7C6FF0;
  --timer-color-2: #4EA1F7;
  --timer-color-3: #2DD4BF;
  --timer-color-4: #F5A623;
  --timer-color-5: #F2707A;
  --timer-color-6: #C56CF0;

  /* typographie */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Inter, Arial, sans-serif;

  /* rythme */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-s: 16px;
  --radius-m: 22px;
  --radius-l: 30px;
  --radius-blob: 42% 58% 61% 39% / 45% 40% 60% 55%;

  --shadow-soft: 0 8px 28px -14px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 20px 48px -18px rgba(0, 0, 0, 0.65);
  --glow-primary: 0 0 0 1px rgba(139, 124, 246, 0.35), 0 12px 32px -8px rgba(108, 92, 231, 0.55);

  --dur-fast: 220ms;
  --dur-med: 380ms;
  --ease-organic: cubic-bezier(.34, 1.2, .4, 1);

  color-scheme: dark;
}

/* variante "clair" — même charte (verre + dégradé indigo/violet), sur fond clair */
:root[data-theme="clair"] {
  --bg: #F2F1FA;
  --bg-soft: #FAF9FE;
  --bg-glow: radial-gradient(60% 45% at 50% 22%, rgba(124, 111, 240, 0.14), transparent 70%);
  --surface: rgba(20, 16, 50, 0.04);
  --surface-alt: rgba(20, 16, 50, 0.07);
  --surface-solid: #FFFFFF;
  --text: #211E33;
  --text-muted: #6B6684;
  --border: rgba(90, 80, 160, 0.18);
  --border-soft: rgba(20, 16, 50, 0.08);
  --shadow-soft: 0 8px 28px -16px rgba(40, 30, 90, 0.28);
  --shadow-lift: 0 20px 48px -20px rgba(40, 30, 90, 0.34);
  --glow-primary: 0 0 0 1px rgba(108, 92, 231, 0.25), 0 12px 32px -10px rgba(108, 92, 231, 0.35);
  color-scheme: light;
}

/* Le violet sombre "verre" est l'identité visuelle d'Instaclasse : c'est le
   rendu par défaut (thème "Système"), quel que soit le réglage clair/sombre
   du système d'exploitation. Seul un choix explicite de "Clair" dans les
   paramètres (data-theme="clair" ci-dessus) bascule vers la variante claire :
   on ne suit donc pas prefers-color-scheme ici, afin que l'écran d'accueil
   corresponde toujours à l'identité de la marque dès le premier lancement. */