/* ==========================================================================
   NeedTech IT — Design System Tokens
   Brand Identity: Learn • Build • Grow
   Color System: Royal Tech Blue (#0B5FFF), Cyan (#00C6FF), Slate (#0F172A)
   ========================================================================== */

:root {
  /* Brand Colors */
  --nt-primary: #0B5FFF;
  --nt-primary-dark: #0050e6;
  --nt-primary-light: #eff6ff;
  --nt-primary-10: rgba(11, 95, 255, 0.08);
  --nt-primary-20: rgba(11, 95, 255, 0.15);

  --nt-secondary: #00C6FF;
  --nt-secondary-10: rgba(0, 198, 255, 0.1);

  --nt-accent: #14B8A6;
  --nt-accent-dark: #0d9488;
  --nt-accent-light: #f0fdfa;

  /* Neutral Surface & Canvas */
  --nt-bg: #F8FAFC;
  --nt-surface: #FFFFFF;
  --nt-surface-muted: #F1F5F9;
  --nt-surface-subtle: #F8FAFC;
  
  /* Dark Theming Elements (Nav, Hero accents, Footers, Code) */
  --nt-dark: #0F172A;
  --nt-dark-card: #1E293B;
  --nt-dark-border: #334155;
  --nt-dark-text: #F8FAFC;
  --nt-dark-muted: #94A3B8;

  /* Border & Dividers */
  --nt-border: #E2E8F0;
  --nt-border-light: #F1F5F9;
  --nt-border-focus: #0B5FFF;

  /* Text Typography Colors */
  --nt-text-heading: #0F172A;
  --nt-text-body: #334155;
  --nt-text-muted: #64748B;
  --nt-text-subtle: #94A3B8;
  --nt-text-white: #FFFFFF;

  /* Feedback / Semantic */
  --nt-success: #10B981;
  --nt-success-light: #ECFDF5;
  --nt-warning: #F59E0B;
  --nt-warning-light: #FFFBEB;
  --nt-danger: #EF4444;
  --nt-danger-light: #FEF2F2;

  /* Gradients */
  --nt-gradient-primary: linear-gradient(135deg, #0B5FFF 0%, #00C6FF 100%);
  --nt-gradient-hero-bg: radial-gradient(100% 70% at 50% 0%, #EFF6FF 0%, #F8FAFC 100%);
  --nt-gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --nt-gradient-dark: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  --nt-gradient-accent: linear-gradient(135deg, #14B8A6 0%, #00C6FF 100%);

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Elevation / Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 32px -8px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.04);
  --shadow-primary: 0 10px 25px -5px rgba(11, 95, 255, 0.28);
  --shadow-card-hover: 0 18px 36px -6px rgba(11, 95, 255, 0.12), 0 8px 18px -4px rgba(15, 23, 42, 0.06);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Container Widths */
  --container-max: 1240px;
  --container-narrow: 960px;
  --container-wide: 1360px;
}