/* ==========================================================================
   COLABRO DESIGN SYSTEM - VARIABLES & DESIGN TOKENS
   Inspired by Scaler.com's high-converting, premium tech aesthetic
   ========================================================================== */

:root {
  /* Brand Primary Colors */
  --primary-hue: 220;
  --primary: #0055FF; /* Scaler signature electric blue */
  --primary-hover: #0043cc;
  --primary-light: #EBF2FF;
  --primary-dark: #0037a3;
  --primary-glow: rgba(0, 85, 255, 0.35);

  /* Secondary Accents */
  --accent-cyan: #00D2FF;
  --accent-cyan-light: #E0F9FF;
  --accent-emerald: #10B981;
  --accent-emerald-light: #ECFDF5;
  --accent-amber: #F59E0B;
  --accent-amber-light: #FFFBEB;
  --accent-coral: #FF4D4D;
  --accent-purple: #7C3AED;

  /* Deep Tech Dark Palettes (Scaler Hero & Dark Card theme) */
  --dark-bg: #030B1C;
  --dark-surface-1: #0A1633;
  --dark-surface-2: #101F45;
  --dark-surface-3: #182B5C;
  --dark-border: rgba(255, 255, 255, 0.12);
  --dark-text-primary: #FFFFFF;
  --dark-text-secondary: #94A3B8;
  --dark-text-muted: #64748B;

  /* Neutral Light Palettes (Scaler high-contrast content sections) */
  --neutral-white: #FFFFFF;
  --neutral-50: #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;
  --neutral-950: #020617;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

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

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Elevation & Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 14px 28px rgba(15, 23, 42, 0.12), 0 5px 10px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --shadow-glow: 0 0 30px rgba(0, 85, 255, 0.28);
  --shadow-glow-cyan: 0 0 30px rgba(0, 210, 255, 0.25);
  --shadow-thermal: 0 12px 30px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-max: 1240px;
  --container-wide: 1360px;
  --header-height: 72px;
  --subnav-height: 54px;
  --announcement-height: 38px;
}