/* NightBudz — Design tokens (couleurs, typo, espacements, glow, motion).
   Palette cyberpunk neon-noir : fonds quasi-noirs, accents violet/magenta,
   CTA vert néon. Repris fidèlement de la référence design. */

:root {
  /* ---- Base: fonds & encre ---- */
  --nb-black: #000000;
  --nb-obsidian-1: #0B0B0F;   /* fond app */
  --nb-obsidian-2: #121216;   /* surface surélevée */
  --nb-obsidian-3: #1A1A22;   /* surface carte/panneau */
  --nb-obsidian-4: #22222C;   /* survol, champs de saisie */
  --nb-hairline: #2A2A35;     /* bordure par défaut sur fond sombre */

  --nb-white: #F5F4FA;
  --nb-ink-1: #F5F4FA;        /* texte primaire */
  --nb-ink-2: #B7B6C4;        /* texte secondaire */
  --nb-ink-3: #7C7B8C;        /* texte tertiaire / désactivé */

  /* ---- Accents de marque ---- */
  --nb-purple: #8A2BE2;
  --nb-purple-dim: #5B1E99;
  --nb-violet-deep: #2B0A4D;
  --nb-magenta: #FF007F;
  --nb-magenta-dim: #B3005A;

  /* ---- Action / vert primaire ---- */
  --nb-lime: #39FF14;
  --nb-green: #00FF66;
  --nb-green-dim: #0FBF4C;

  /* ---- Sémantique ---- */
  --nb-success: #00FF66;
  --nb-warning: #FFB800;
  --nb-danger: #FF3358;
  --nb-info: #00E5FF;

  /* ---- Alias : surfaces ---- */
  --surface-app: var(--nb-black);
  --surface-1: var(--nb-obsidian-1);
  --surface-2: var(--nb-obsidian-2);
  --surface-card: var(--nb-obsidian-3);
  --surface-card-hover: var(--nb-obsidian-4);
  --surface-overlay: rgba(11, 11, 15, 0.86);
  --surface-glass: rgba(18, 18, 22, 0.55);

  /* ---- Alias : texte ---- */
  --text-primary: var(--nb-ink-1);
  --text-secondary: var(--nb-ink-2);
  --text-tertiary: var(--nb-ink-3);
  --text-on-accent: #05070A;

  /* ---- Alias : bordures ---- */
  --border-default: var(--nb-hairline);
  --border-accent: var(--nb-purple);
  --border-focus: var(--nb-green);

  /* ---- Alias : action ---- */
  --action-primary: var(--nb-lime);
  --action-primary-hover: var(--nb-green);
  --action-primary-active: var(--nb-green-dim);
  --action-secondary: var(--nb-purple);
  --action-secondary-hover: #9D4CF0;
  --action-danger: var(--nb-danger);

  /* ---- Dégradés ---- */
  --gradient-brand: linear-gradient(135deg, var(--nb-violet-deep) 0%, var(--nb-purple) 55%, var(--nb-magenta) 100%);
  --gradient-scan: linear-gradient(180deg, rgba(138,43,226,0.15) 0%, rgba(0,0,0,0) 60%);
  --gradient-fade-bottom: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);

  /* ---- Typographie ---- */
  --font-display: 'Orbitron', 'Rajdhani', sans-serif;
  --font-heading: 'Rajdhani', 'Orbitron', sans-serif;
  --font-body: 'Inter', 'Rajdhani', sans-serif;
  --font-mono: 'Rajdhani', ui-monospace, monospace;

  --text-display-xl: 700 clamp(48px, 7vw, 96px)/1.02 var(--font-display);
  --text-display-l:  700 clamp(36px, 5vw, 64px)/1.05 var(--font-display);
  --text-display-m:  600 clamp(28px, 3.4vw, 40px)/1.1 var(--font-display);

  --text-h1: 600 32px/1.15 var(--font-heading);
  --text-h2: 600 26px/1.2 var(--font-heading);
  --text-h3: 600 21px/1.25 var(--font-heading);
  --text-label-lg: 600 15px/1.2 var(--font-heading);
  --text-label: 600 13px/1.2 var(--font-heading);
  --text-eyebrow: 700 12px/1.2 var(--font-heading);

  --text-body-lg: 400 18px/1.55 var(--font-body);
  --text-body: 400 16px/1.55 var(--font-body);
  --text-body-sm: 400 14px/1.5 var(--font-body);
  --text-caption: 500 12px/1.4 var(--font-body);

  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.18em;

  /* ---- Espacements & rayons ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --clip-cut: 14px;

  --container-max: 1240px;
  --container-pad: clamp(20px, 4vw, 48px);

  --stroke-hair: 1px;
  --stroke-md: 1.5px;
  --stroke-thick: 2px;

  /* ---- Élévation & glow (signature de la marque) ---- */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.6);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.75);

  --glow-purple-sm: 0 0 12px rgba(138,43,226,0.7), 0 0 2px rgba(138,43,226,0.9);
  --glow-purple-md: 0 0 22px rgba(138,43,226,0.8), 0 0 4px rgba(138,43,226,1);
  --glow-purple-lg: 0 0 44px rgba(138,43,226,0.85), 0 0 10px rgba(138,43,226,1);

  --glow-magenta-sm: 0 0 12px rgba(255,0,127,0.7), 0 0 2px rgba(255,0,127,0.9);
  --glow-magenta-md: 0 0 22px rgba(255,0,127,0.75), 0 0 4px rgba(255,0,127,1);
  --glow-magenta-lg: 0 0 44px rgba(255,0,127,0.8), 0 0 10px rgba(255,0,127,1);

  --glow-neon-mix: 0 0 24px rgba(138,43,226,0.55), 0 0 40px rgba(255,0,127,0.35), 0 0 4px rgba(138,43,226,0.8);
  --glow-neon-mix-lg: 0 0 40px rgba(138,43,226,0.7), 0 0 70px rgba(255,0,127,0.45), 0 0 8px rgba(255,0,127,0.9);

  --glow-green-sm: 0 0 12px rgba(57,255,20,0.7), 0 0 2px rgba(57,255,20,1);
  --glow-green-md: 0 0 26px rgba(57,255,20,0.85), 0 0 5px rgba(57,255,20,1);
  --glow-green-lg: 0 0 55px rgba(57,255,20,0.95), 0 0 14px rgba(57,255,20,1), 0 0 3px #eaffe0;

  --text-glow-green: 0 0 10px rgba(57,255,20,0.9), 0 0 22px rgba(57,255,20,0.5);
  --text-glow-purple: 0 0 12px rgba(138,43,226,0.85), 0 0 26px rgba(138,43,226,0.45);
  --text-glow-magenta: 0 0 12px rgba(255,0,127,0.85), 0 0 26px rgba(255,0,127,0.45);
  --text-glow-white: 0 0 14px rgba(200,180,255,0.55), 0 0 30px rgba(138,43,226,0.4);

  --focus-ring: 0 0 0 2px var(--surface-app), 0 0 0 4px var(--nb-green), var(--glow-green-sm);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --duration-pulse: 1.6s;
}