/*
 * Tokens de design Nextmad AI, partagés par le site public et la console.
 * Source : charte docs/BRAND.md (palette bleu électrique / cyan sur fonds bleu nuit) ; la structure des tokens
 * reprend celle de la maquette docs/design-reference/reference/prototype-nexus-ai.html.
 * Préfixe --nx- : aucune collision avec les variables actuelles de la console (styles.css), qui n'est pas encore migrée.
 * Thème unique sombre, comme la maquette (le logo est conçu pour un fond sombre).
 */
:root {
  /* Couleurs : fonds */
  --nx-bg: #050b16;
  --nx-bg-2: #061426;
  --nx-surface: #0b1526;
  --nx-surface-2: #10203a;
  --nx-bg-overlay: rgba(5, 11, 22, 0.86);      /* en-tête fixe (flou d'arrière-plan) */
  --nx-bar-overlay: rgba(6, 20, 38, 0.95);    /* barre de sélection en bas d'écran */
  --nx-panel-overlay: rgba(11, 21, 38, 0.7);  /* messages du panneau d'exemple */
  --nx-inset-overlay: rgba(5, 11, 22, 0.5);    /* encadré « Exemple » des cartes */

  /* Couleurs : lignes */
  --nx-line: #1a2c47;
  --nx-line-2: #24406a;

  /* Couleurs : accents */
  --nx-blue: #087bff;         /* bleu électrique : couleur dominante de la marque */
  --nx-blue-light: #3d97ff;   /* haut du dégradé de l'icône de document */
  --nx-blue-strong: #0a6ff0;  /* haut du dégradé des boutons principaux (texte blanc ≥ 4,5:1) */
  --nx-blue-deep: #0557c2;    /* bas des dégradés */
  --nx-navy: #061426;         /* bleu profond */
  --nx-cyan: #00c8ff;
  --nx-glow: rgba(8, 123, 255, 0.35);
  --nx-blue-tint: rgba(8, 123, 255, 0.12);    /* option cochée, fond sélectionné */
  --nx-cyan-ring: rgba(0, 200, 255, 0.2);     /* halo de focus des champs */

  /* Couleurs : texte */
  --nx-fg: #f5f8ff;
  --nx-muted: #a8b5c8;
  --nx-dim: #7a889e;          /* contraste ≈ 5,4:1 sur --nx-bg : mentions secondaires */
  --nx-on-accent: #ffffff;

  /* Couleurs : états */
  --nx-ok: #3ddc97;
  --nx-ok-line: rgba(61, 220, 151, 0.4);
  --nx-danger: #ff8a8a;       /* texte d'erreur */
  --nx-danger-line: #ff6b6b;  /* bordure de champ invalide */

  /* Dégradés */
  --nx-gradient-primary: linear-gradient(180deg, var(--nx-blue-strong), var(--nx-blue-deep));
  --nx-gradient-card: linear-gradient(180deg, var(--nx-surface), var(--nx-bg-2));
  --nx-gradient-doc: linear-gradient(180deg, var(--nx-blue-light), var(--nx-blue-deep));
  --nx-gradient-avatar: radial-gradient(circle at 50% 35%, #0b4fae, #061426 70%);
  --nx-gradient-hero: radial-gradient(60% 70% at 85% 10%, rgba(8, 123, 255, 0.2), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(0, 200, 255, 0.08), transparent 70%);

  /* Typographie */
  --nx-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --nx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nx-text-xs: 12px;
  --nx-text-sm: 13px;
  --nx-text-base: 15px;
  --nx-text-md: 16px;
  --nx-text-lg: 18px;
  --nx-text-xl: 22px;
  --nx-text-2xl: 24px;
  --nx-text-3xl: 30px;
  --nx-text-4xl: 44px;
  --nx-text-h2: clamp(28px, 5vw, 46px);
  --nx-text-h1: clamp(38px, 6.4vw, 72px);
  --nx-leading-body: 1.6;
  --nx-leading-tight: 1.35;
  --nx-leading-heading: 1.02;
  --nx-tracking-heading: 0.01em;
  --nx-tracking-eyebrow: 0.18em;
  --nx-tracking-tag: 0.32em;
  --nx-weight-regular: 400;
  --nx-weight-medium: 500;
  --nx-weight-semibold: 600;
  --nx-weight-bold: 700;
  --nx-weight-extrabold: 700;  /* Space Grotesk s'arrête à 700 */

  /* Espacements */
  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 12px;
  --nx-space-4: 16px;
  --nx-space-5: 20px;
  --nx-space-6: 24px;
  --nx-space-7: 28px;
  --nx-space-8: 36px;
  --nx-space-9: 40px;
  --nx-space-10: 48px;
  --nx-space-11: 56px;
  --nx-space-12: 64px;
  --nx-space-13: 72px;

  /* Mise en page */
  --nx-wrap: 1180px;
  --nx-gutter: 16px;
  --nx-nav-height: 64px;
  --nx-section-pad: 72px;
  --nx-scroll-offset: 80px;

  /* Rayons */
  --nx-radius-xs: 6px;
  --nx-radius-sm: 10px;
  --nx-radius-md: 12px;
  --nx-radius-lg: 16px;
  --nx-radius-xl: 18px;
  --nx-radius-pill: 999px;

  /* Ombres et halos */
  --nx-shadow-primary: 0 0 0 1px rgba(120, 190, 255, 0.35) inset, 0 8px 28px var(--nx-glow);
  --nx-shadow-primary-hover: 0 0 0 1px rgba(150, 200, 255, 0.5) inset, 0 10px 36px rgba(8, 123, 255, 0.5);
  --nx-shadow-selected: 0 0 0 1px var(--nx-blue), 0 10px 40px rgba(8, 123, 255, 0.18);
  --nx-shadow-panel: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(8, 123, 255, 0.12);
  --nx-shadow-avatar: 0 0 0 2px var(--nx-blue), 0 0 18px var(--nx-glow);
  --nx-shadow-step: 0 0 18px var(--nx-glow);
  --nx-focus-ring: 2px solid var(--nx-cyan);

  /* Mouvement */
  --nx-duration-fast: 0.15s;
  --nx-duration-base: 0.2s;
  --nx-duration-slow: 0.3s;
  --nx-duration-reveal: 0.5s;
  --nx-blur-nav: 12px;
  --nx-blur-bar: 10px;

  /* Plans */
  --nx-z-bar: 40;
  --nx-z-nav: 50;
  --nx-z-safe-area: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nx-duration-fast: 0s;
    --nx-duration-base: 0s;
    --nx-duration-slow: 0s;
    --nx-duration-reveal: 0s;
  }
}