/*
  NovaGuard — © 2026 NovaGuard (Maisto & Ghost). Tous droits réservés / All Rights Reserved.
  Logiciel propriétaire et confidentiel — copie, distribution ou « leak » interdits. Voir LICENSE.

  ============================================================================
  DESIGN TOKENS — source de vérité de la charte graphique
  Direction artistique « NUIT DE VERRE » (09/2026)
  ============================================================================
  Un seul fichier, chargé par TOUTES les pages (landing, login, panel, pages légales).
  Règle : aucune couleur, rayon ou police « en dur » dans les pages — tout
  passe par var(--…). Pour changer la marque, on change ici, une fois.

  Le concept : des panneaux de verre fumé posés sur des scènes vivantes de
  nuit. Le fond n'est jamais un aplat — c'est une scène : dégradé encre →
  bleu nuit, nappes cyan/violet très diluées, caustiques qui dérivent
  lentement. Le verre floute réellement ce qui passe derrière lui ; la
  typographie claire se pose dessus. La lumière vient du haut, légèrement à
  gauche : chaque verre attrape un fil blanc sur son arête haute.

  Deux registres partagent ces tokens :
    • APPLICATION (login, panel) : boutons 44px, rayon 10px, densité UI.
    • MARKETING   (landing)      : boutons pilule, titres XXL légers, scènes.
*/

:root {
  color-scheme: dark;

  /* ---------- Surfaces (du plus profond au plus proche) ---------- */
  --bg-0:     #0a0a14;                 /* fond de page — encre de nuit */
  --bg-alt:   #08080f;                 /* creux des scènes */
  --bg-1:     #10101e;                 /* cartes, panneaux opaques (app) */
  --bg-2:     #161629;                 /* champs, survol, menus */
  --bg-glass: rgba(16, 16, 32, .55);   /* panneaux vitrés (backdrop-filter) */
  --bg-glass-2: rgba(10, 10, 22, .42);

  /* ---------- Scène (fonds vivants — jamais d'aplat seul) ---------- */
  --scene-base:   #0b0b16;                    /* base de scène */
  --scene-navy:   #10152f;                    /* pôle bleu nuit des dégradés */
  --scene-violet: rgba(124, 106, 255, .16);   /* nappe lavande de nuit */
  --scene-cyan:   rgba(63, 208, 255, .13);    /* nappe cyan */
  --scene-cobalt: rgba(30, 140, 255, .15);    /* nappe cobalt */
  --scene-white:  rgba(255, 255, 255, .045);  /* haute lumière (caustique) */

  /* ---------- Verre (recette unique, déclinée) ---------- */
  --glass:          rgba(16, 16, 32, .55);    /* panneau */
  --glass-strong:   rgba(13, 13, 27, .76);    /* formulaires, modales */
  --glass-pill:     rgba(255, 255, 255, .05); /* pilules */
  --glass-lens:     rgba(255, 255, 255, .06); /* objets de verre (lentilles) */
  --glass-veil:     rgba(9, 9, 18, .62);      /* voile de navigation */
  --hairline-glass: rgba(255, 255, 255, .10); /* bordure du verre */
  --edge:           rgba(255, 255, 255, .18); /* arête haute allumée (inset 0 1px 0) */
  --edge-hi:        rgba(255, 255, 255, .30);
  --blur:           28px;
  --blur-pill:      20px;
  --blur-lens:      18px;
  --sh-glass: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 68px rgba(0, 0, 0, .50);
  --sh-pill:  0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .28);

  /* ---------- Texte (encres claires — le blanc pur est réservé à l'accent) ---------- */
  --ink:    #eef0fa;   /* accent des titres, texte fort */
  --ink-hi: #c3c8de;   /* titres légers, chapô */
  --ink-2:  #a6abc8;   /* paragraphes, descriptions */
  --ink-3:  #7b81a0;   /* légendes, métadonnées (≥ 4.5:1 sur --bg-0) */

  /* ---------- Traits ---------- */
  --line:   rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .14);
  --line-3: rgba(255, 255, 255, .26); /* survol des bordures */

  /* ---------- Marque ---------- */
  --silver:    #E8EEF6;   /* chrome du N, titres forts */
  --cyan:      #3FD0FF;   /* accent principal, liens, halos */
  --cyan-hi:   #8FE0FF;   /* cyan clair : icônes, hover des liens */
  --cobalt:    #1E8CFF;   /* actions, états actifs */
  --blue-deep: #0B50D0;   /* fin de dégradé, ombres colorées */
  --violet:    #7C6AFF;   /* pointe violette du spectre (halos, nappes) */

  /* Teintes translucides prêtes à l'emploi (fonds/bords d'accent) */
  --cyan-08:   rgba(63, 208, 255, .08);
  --cyan-12:   rgba(63, 208, 255, .12);
  --cyan-26:   rgba(63, 208, 255, .26);
  --cobalt-10: rgba(30, 140, 255, .10);
  --cobalt-16: rgba(30, 140, 255, .16);
  --cobalt-35: rgba(30, 140, 255, .35);
  --cobalt-55: rgba(30, 140, 255, .55);

  /* ---------- États ---------- */
  --ok:   #2EE6A0;  --ok-bg:   rgba(46, 230, 160, .10);  --ok-line:   rgba(46, 230, 160, .24);
  --warn: #febc2e;  --warn-bg: rgba(254, 188, 46, .10);  --warn-line: rgba(254, 188, 46, .24);
  --err:  #ff5f57;  --err-bg:  rgba(255, 95, 87, .10);   --err-line:  rgba(255, 95, 87, .24);
  --err-hi: #ffa3a0; /* texte d'erreur sur fond sombre */
  --warn-hi: #ffd47a;
  --ok-hi:   #7DF0C4;

  /* ---------- Dégradés ---------- */
  --grad:        linear-gradient(135deg, #1E8CFF 0%, #3FD0FF 50%, #0B50D0 100%); /* signature (app) */
  --grad-forge:  linear-gradient(102deg, #8FE0FF 0%, #3FD0FF 46%, #1E8CFF 100%); /* bouton marketing */
  --grad-flame:  linear-gradient(102deg, #3FD0FF 0%, #1E8CFF 46%, #0B50D0 100%); /* texte « flamme » */
  --grad-spectre: linear-gradient(96deg, #8FE0FF 0%, #3FD0FF 45%, #7C6AFF 100%); /* le fil spectral (un mot max par écran) */
  --grad-chrome: linear-gradient(178deg, #ffffff 12%, #c8d2e8 48%, #737b96 100%); /* texte « chrome » */
  --grad-silver: linear-gradient(178deg, #E8EEF6, #a6abc8);
  --grad-island: linear-gradient(160deg, #F7F9FE 0%, #E4E9F4 55%, #C9D1E4 100%);  /* îlot clair de la CTA finale */

  /* ---------- Typographie (trois voix, aucune de plus) ---------- */
  /* Outfit porte le display en 300, l'accent en 500 — jamais plus gras.
     Geist porte l'interface. Geist Mono parle en petites capitales espacées.
     Les polices de repli sont celles des pages non encore migrées. */
  --font-display: 'Outfit', 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Geist', 'Inter', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --tracking-mono: .18em;

  /* ---------- Rayons ---------- */
  --r-sm:   9px;
  --r:      10px;   /* boutons, champs (app) */
  --r-md:   12px;   /* médias */
  --r-lg:   14px;   /* cartes (app) */
  --r-xl:   16px;
  --r-2xl:  20px;   /* cartes internes (marketing) */
  --r-glass: 28px;  /* panneaux de verre */
  --r-pill: 999px;

  /* ---------- Ombres ---------- */
  --shadow-lift: 0 10px 30px -18px rgba(0, 0, 0, .8);
  --shadow-halo: 0 12px 32px -10px rgba(30, 140, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .14);
  --shadow-glow: 0 0 10px #3FD0FF;
  --shadow-card: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 60px -20px rgba(30, 140, 255, .25);

  /* ---------- Composants ---------- */
  --btn-h:      44px;  --btn-r: var(--r);       /* app */
  --btn-h-sm:   38px;  --btn-r-sm: var(--r-sm);
  --btn-h-lg:   52px;  --btn-r-lg: var(--r-pill); /* marketing */
  --field-h:    44px;
  --focus-ring: 0 0 0 3px rgba(30, 140, 255, .16);
  --nav-h:      72px;

  /* ---------- Mouvement ---------- */
  --ease:    cubic-bezier(.2, .7, .2, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --t-fast:  .15s;
  --t:       .22s;

  /* ============================================================
     ALIAS DE COMPATIBILITÉ — anciens noms encore utilisés par des
     pages en cours de migration. À supprimer quand plus référencés.
     ============================================================ */
  --void:     var(--bg-0);      /* landing */
  --deep:     var(--bg-alt);    /* landing : ancienne surface alternée */
  --panel-a:  var(--bg-1);      /* landing : haut des cartes */
  --panel-b:  var(--bg-alt);    /* landing : bas des cartes */
  --ink-4:    var(--ink-3);     /* landing : légendes */
  --deepblue: var(--blue-deep); /* landing */
  --forge:    var(--grad-forge);
  --flame:    var(--grad-flame);
  --chrome:   var(--grad-chrome);
  --blue:     var(--cyan);
  --indigo:   var(--blue-deep);
  --ng-cobalt:  var(--cobalt);  /* panel */
  --ng-radar:   var(--ok);
  --ng-alert:   #E5484D;
  --ng-surface: #161D2F;
}

/* Sélection de texte cohérente partout */
::selection { background: rgba(30, 140, 255, .35); color: #fff; }

/* Respect systématique de la préférence « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}