/* ==========================================================================
   NOFAIL · Design tokens
   Direction artistique « Mission Control » (Book d'idées, section 5),
   déclinée en nuances de bleu à la demande de Sacha (oct. 2026).
   Fenêtres refaites façon dashboard SaaS (inspiration vinteer.io) :
   coins arrondis, bordures fines translucides, reflets et halos bleus.
   Toutes les couleurs, typos, rayons et ombres passent par ces variables :
   pour changer l'identité visuelle, on ne touche qu'à ce fichier.
   ========================================================================== */

:root {
  /* Palette de marque */
  --c-ink: #070D1C;        /* Bleu nuit : fond sombre par défaut */
  --c-paper: #EEF3FB;      /* Bleu glacier : fond clair */
  --c-signal: #1F6BFF;     /* Bleu électrique : actions, succès */
  --c-on-signal: #FFFFFF;  /* Texte posé sur le bleu électrique */
  --c-ai: #38BDF8;         /* Bleu ciel : réservé à l'IA */
  --c-on-ai: #04121F;      /* Texte posé sur le bleu ciel */
  --c-alert: #FF5A1F;      /* Orange brûlé : alertes, relances urgentes */
  --c-warn: #FFB020;       /* Ambre : intensité moyenne, mode démo */

  /* Typographies */
  --font-display: "Unbounded", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Échelle */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 22px;
  --border-w: 1px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  --container: 1160px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* sortie douce type « spring » */

  /* Thème sombre (par défaut) */
  --bg: var(--c-ink);
  --bg-elev: #0E1628;
  --bg-elev-2: #16203A;
  --fg: #EAF1FF;
  --fg-muted: #8FA0C2;
  --fg-faint: #55658A;
  --line: rgba(143, 160, 194, .14);      /* bordure fine translucide */
  --line-strong: rgba(143, 160, 194, .32); /* bordure au survol */
  --accent: #4D8BFF;       /* bleu électrique éclairci pour rester lisible sur fond nuit */
  --accent-fg: var(--c-on-signal);
  --ai: var(--c-ai);
  --ai-soft: rgba(56, 189, 248, .12);
  --alert: var(--c-alert);
  --alert-soft: rgba(255, 90, 31, .14);
  --signal-soft: rgba(31, 107, 255, .16);
  --overlay: rgba(4, 8, 18, .65);

  /* Fenêtres : fond légèrement dégradé, reflet en haut, ombre douce */
  --surface: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 60%), var(--bg-elev);
  --surface-2: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)), var(--bg-elev-2);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-pop: 0 24px 64px -16px rgba(0, 0, 0, .75);
  --glow-signal: 0 0 0 1px rgba(31, 107, 255, .45), 0 8px 32px -6px rgba(31, 107, 255, .45);
  --glow-ai: 0 0 0 1px rgba(56, 189, 248, .4), 0 8px 32px -6px rgba(56, 189, 248, .35);
  --spot: rgba(77, 139, 255, .12);        /* halo qui suit la souris sur les cartes */

  color-scheme: dark;
}

/* Thème clair « Glacier » : choix explicite de l'utilisateur */
:root[data-theme="light"] {
  --c-ai: #0369A1;         /* bleu ciel assombri pour rester lisible sur fond clair */
  --c-on-ai: #FFFFFF;
  --bg: var(--c-paper);
  --bg-elev: #FFFFFF;
  --bg-elev-2: #DFE8F7;
  --fg: #0A1430;
  --fg-muted: #4A5A7D;
  --fg-faint: #8696B5;
  --line: rgba(10, 20, 48, .10);
  --line-strong: rgba(10, 20, 48, .22);
  --accent: var(--c-signal);
  --accent-fg: var(--c-on-signal);
  --signal-soft: rgba(31, 107, 255, .08);
  --ai-soft: rgba(3, 105, 161, .08);
  --alert-soft: rgba(255, 90, 31, .10);
  --overlay: rgba(10, 20, 48, .45);
  --surface: linear-gradient(180deg, #FFFFFF, #FBFCFF), var(--bg-elev);
  --surface-2: var(--bg-elev-2);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .8);
  --shadow-soft: 0 1px 2px rgba(10, 20, 48, .06), 0 12px 32px -14px rgba(10, 20, 48, .18);
  --shadow-pop: 0 24px 64px -16px rgba(10, 20, 48, .3);
  --glow-signal: 0 0 0 1px rgba(31, 107, 255, .5), 0 8px 28px -8px rgba(31, 107, 255, .35);
  --glow-ai: 0 0 0 1px rgba(3, 105, 161, .45), 0 8px 28px -8px rgba(3, 105, 161, .3);
  --spot: rgba(31, 107, 255, .07);
  color-scheme: light;
}

/* Le mode sombre est le défaut de marque, même si l'OS est en clair.
   Le bloc ci-dessous garantit qu'un choix explicite « dark » reste sombre. */
:root[data-theme="dark"] {
  color-scheme: dark;
}