/* ==========================================================================
   Nerva Logic — Official Brand & Semantic Design Tokens
   AI-Powered Business Solutions | Brede Input -> Strakke Output
   ========================================================================== */

:root {
  /* Core Brand Palette (Official Nerva Logic Tokens) */
  --nl-navy-950: #011238;
  --nl-navy-900: #02173F;
  --nl-navy-700: #022C5E;
  --nl-blue-600: #0064B8;
  --nl-blue-500: #007CF8;
  --nl-sky-400:  #00B2F8;
  --nl-cyan-300: #14DCF6;
  --nl-teal-400: #04C8C4;
  --nl-mint-400: #04C8C0;

  /* Official Base Surface & Mode Primitives */
  --nl-bg-light: #FFFFFF;
  --nl-surface-light: #F4F7FC;
  --nl-bg-dark: #051124;
  --nl-surface-dark: #0A1D3B;
  --nl-text-light-mode: #02173F;
  --nl-text-dark-mode: #F8FAFC;

  /* Official Logo & Brand Multi-Stop Gradients */
  --nl-grad-n-left: linear-gradient(182deg, #011238 0%, #022C5E 42%, #0064B8 78%, #007CF8 100%);
  --nl-grad-n-right: linear-gradient(2deg, #011238 0%, #022D56 36%, #008E9B 72%, #04C8C0 100%);
  --nl-grad-infinity-circuit: linear-gradient(55deg, #007CF8 0%, #00B2F8 32%, #14DCF6 52%, #04C8C4 78%, #04C8C0 100%);

  /* Dark-Mode Brand Multi-Stop Gradients */
  --nl-grad-n-left-dark: linear-gradient(182deg, #F8FAFC 0%, #CBD5E1 44%, #38BDF8 78%, #1D8CFF 100%);
  --nl-grad-n-right-dark: linear-gradient(2deg, #F8FAFC 0%, #CBD5E1 40%, #2DD4BF 74%, #14D9C4 100%);
  --nl-grad-circuit-dark: linear-gradient(55deg, #1D8CFF 0%, #22D3EE 36%, #34F5E8 62%, #14D9C4 100%);
  --nl-grad-surface-subtle: linear-gradient(145deg, rgba(0, 124, 248, 0.12) 0%, rgba(20, 220, 246, 0.05) 50%, rgba(4, 200, 192, 0.08) 100%);

  /* Status & Telemetry Colors */
  --nl-success: #04C8C0;
  --nl-success-bg: rgba(4, 200, 192, 0.14);
  --nl-info: #00B2F8;
  --nl-info-bg: rgba(0, 178, 248, 0.14);
  --nl-warning: #F59E0B;
  --nl-warning-bg: rgba(245, 158, 11, 0.14);
  --nl-danger: #EF4444;
  --nl-danger-bg: rgba(239, 68, 68, 0.14);

  /* Typography */
  --nl-font-display: 'Gilroy', 'Plus Jakarta Sans', 'Montserrat', system-ui, -apple-system, sans-serif;
  --nl-font-body: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --nl-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Layout & Container */
  --nl-container-max: 1280px;
  --nl-container-narrow: 960px;
  --nl-container-wide: 1400px;
  --nl-header-height: 80px;

  /* Border Radius Scale */
  --nl-radius-xs: 6px;
  --nl-radius-sm: 10px;
  --nl-radius-md: 14px;
  --nl-radius-lg: 20px;
  --nl-radius-xl: 28px;
  --nl-radius-2xl: 36px;
  --nl-radius-full: 9999px;

  /* Transitions & Easing */
  --nl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --nl-transition-fast: 160ms var(--nl-ease-out);
  --nl-transition-base: 280ms var(--nl-ease-out);
  --nl-transition-slow: 500ms var(--nl-ease-out);

  /* ========================================================================
     Default Theme: Signature High-Tech Dark Mode (:root & [data-theme="dark"])
     ======================================================================== */
  --nl-bg: #051124;
  --nl-bg-alt: #07162E;
  --nl-surface: #0A1D3B;
  --nl-surface-elevated: #0F274D;
  --nl-surface-glass: rgba(10, 29, 59, 0.72);
  --nl-surface-card-hover: #122E59;
  --nl-header-bg: rgba(5, 17, 36, 0.82);

  --nl-border: rgba(148, 163, 184, 0.14);
  --nl-border-strong: rgba(20, 220, 246, 0.34);
  --nl-border-subtle: rgba(255, 255, 255, 0.07);

  --nl-text-primary: #F8FAFC;
  --nl-text-secondary: #CBD5E1;
  --nl-text-muted: #94A3B8;
  --nl-text-inverse: #02173F;

  --nl-glow-blue: rgba(0, 124, 248, 0.38);
  --nl-glow-cyan: rgba(20, 220, 246, 0.32);
  --nl-glow-mint: rgba(4, 200, 192, 0.28);

  --nl-shadow-sm: 0 4px 14px rgba(1, 18, 56, 0.35);
  --nl-shadow-md: 0 12px 32px rgba(1, 18, 56, 0.50);
  --nl-shadow-lg: 0 24px 60px rgba(1, 18, 56, 0.68);
  --nl-shadow-xl: 0 32px 80px rgba(0, 8, 24, 0.80);
  --nl-shadow-glow: 0 0 36px rgba(0, 124, 248, 0.28), 0 0 72px rgba(20, 220, 246, 0.14);

  --nl-grid-line: rgba(20, 220, 246, 0.06);
  --nl-input-bg: rgba(5, 17, 36, 0.75);
}

/* Explicit Dark Theme Selector */
[data-theme="dark"] {
  color-scheme: dark;
  --nl-bg: #051124;
  --nl-bg-alt: #07162E;
  --nl-surface: #0A1D3B;
  --nl-surface-elevated: #0F274D;
  --nl-surface-glass: rgba(10, 29, 59, 0.72);
  --nl-surface-card-hover: #122E59;
  --nl-header-bg: rgba(5, 17, 36, 0.82);

  --nl-border: rgba(148, 163, 184, 0.14);
  --nl-border-strong: rgba(20, 220, 246, 0.34);
  --nl-border-subtle: rgba(255, 255, 255, 0.07);

  --nl-text-primary: #F8FAFC;
  --nl-text-secondary: #CBD5E1;
  --nl-text-muted: #94A3B8;
  --nl-text-inverse: #02173F;

  --nl-glow-blue: rgba(0, 124, 248, 0.38);
  --nl-glow-cyan: rgba(20, 220, 246, 0.32);
  --nl-glow-mint: rgba(4, 200, 192, 0.28);

  --nl-shadow-sm: 0 4px 14px rgba(1, 18, 56, 0.35);
  --nl-shadow-md: 0 12px 32px rgba(1, 18, 56, 0.50);
  --nl-shadow-lg: 0 24px 60px rgba(1, 18, 56, 0.68);
  --nl-shadow-xl: 0 32px 80px rgba(0, 8, 24, 0.80);
  --nl-shadow-glow: 0 0 36px rgba(0, 124, 248, 0.28), 0 0 72px rgba(20, 220, 246, 0.14);

  --nl-grid-line: rgba(20, 220, 246, 0.06);
  --nl-input-bg: rgba(5, 17, 36, 0.75);
}

/* ==========================================================================
   Light Theme Support ([data-theme="light"])
   Clean Executive Daylight Mode with Deep Navy (#02173F) & Electric Accents
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;
  --nl-bg: #FFFFFF;
  --nl-bg-alt: #F4F7FC;
  --nl-surface: #F4F7FC;
  --nl-surface-elevated: #FFFFFF;
  --nl-surface-glass: rgba(255, 255, 255, 0.86);
  --nl-surface-card-hover: #EDF3FB;
  --nl-header-bg: rgba(255, 255, 255, 0.88);

  --nl-border: rgba(2, 23, 63, 0.11);
  --nl-border-strong: rgba(0, 124, 248, 0.38);
  --nl-border-subtle: rgba(2, 23, 63, 0.06);

  --nl-text-primary: #02173F;
  --nl-text-secondary: #2B4268;
  --nl-text-muted: #5A7094;
  --nl-text-inverse: #F8FAFC;

  --nl-glow-blue: rgba(0, 124, 248, 0.18);
  --nl-glow-cyan: rgba(0, 178, 248, 0.16);
  --nl-glow-mint: rgba(4, 200, 192, 0.16);

  --nl-shadow-sm: 0 2px 10px rgba(2, 23, 63, 0.05);
  --nl-shadow-md: 0 10px 28px rgba(2, 23, 63, 0.08);
  --nl-shadow-lg: 0 20px 48px rgba(2, 23, 63, 0.12);
  --nl-shadow-xl: 0 28px 64px rgba(2, 23, 63, 0.16);
  --nl-shadow-glow: 0 12px 36px rgba(0, 124, 248, 0.16), 0 4px 16px rgba(4, 200, 192, 0.10);

  --nl-grid-line: rgba(2, 23, 63, 0.045);
  --nl-input-bg: #FFFFFF;
}