/* BROKAR DESIGN SYSTEM TOKENS - 2026 */

:root {
  /* ========================================================================
     COLOR SYSTEM
     ======================================================================== */
  
  /* Primary Brand - Brokar Blue (Trust & Tech) */
  --brokar-blue-950: #0A1628;  /* Deep Space */
  --brokar-blue-900: #0F2847;  /* Midnight */
  --brokar-blue-800: #1A3A5F;  /* Ocean Deep */
  --brokar-blue-700: #1E429F;
  --brokar-blue-600: #2563EB;  /* Primary Brand */
  --brokar-blue-500: #3B82F6;  /* Bright Blue */
  --brokar-blue-400: #60A5FA;
  --brokar-blue-300: #93C5FD;
  --brokar-blue-200: #DBEAFE;
  --brokar-blue-100: #EFF6FF;
  --brokar-blue-50:  #F7FAFC;

  /* Accent 1 - Brokar Violet (Innovation & AI) */
  --brokar-violet-900: #2E1065;
  --brokar-violet-800: #4C1D95;
  --brokar-violet-700: #6D28D9;
  --brokar-violet-600: #7C3AED;
  --brokar-violet-500: #8B5CF6;  /* Primary Violet */
  --brokar-violet-400: #A78BFA;
  --brokar-violet-300: #C4B5FD;
  --brokar-violet-200: #DDD6FE;
  --brokar-violet-100: #EDE9FE;

  /* Accent 2 - Brokar Cyan (Dynamism & Growth) */
  --brokar-cyan-900: #083344;
  --brokar-cyan-800: #155E75;
  --brokar-cyan-700: #0E7490;
  --brokar-cyan-600: #0891B2;
  --brokar-cyan-500: #06B6D4;  /* Primary Cyan */
  --brokar-cyan-400: #22D3EE;  /* Electric Cyan */
  --brokar-cyan-300: #67E8F9;
  --brokar-cyan-200: #A5F3FC;
  --brokar-cyan-100: #CFFAFE;

  /* Accent 3 - Brokar Amber (Action & Conversion) */
  --brokar-amber-600: #D97706;
  --brokar-amber-500: #F59E0B;
  --brokar-amber-400: #FBBF24;

  /* Neutrals */
  --brokar-gray-900: #111827;
  --brokar-gray-800: #1F2937;
  --brokar-gray-700: #374151;
  --brokar-gray-600: #4B5563;
  --brokar-gray-500: #6B7280;
  --brokar-gray-400: #9CA3AF;
  --brokar-gray-300: #D1D5DB;
  --brokar-gray-200: #E5E7EB;
  --brokar-gray-100: #F3F4F6;
  --brokar-white: #FFFFFF;

  /* Semantic Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */
  
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Fluid Type Scale (clamp) */
  --text-display-xl: clamp(3.5rem, 8vw, 6rem);    /* Hero Headline */
  --text-display-lg: clamp(3rem, 6vw, 4.5rem);    /* Section Hero */
  --text-h1: clamp(2.25rem, 5vw, 3.75rem);        /* Page Title */
  --text-h2: clamp(1.875rem, 4vw, 3rem);          /* Section Title */
  --text-h3: clamp(1.5rem, 3vw, 2.25rem);         /* Subsection */
  --text-xl: clamp(1.25rem, 2vw, 1.5rem);         /* Lead Text */
  --text-lg: 1.125rem;                            /* Large Body */
  --text-base: 1rem;                              /* Base Body */
  --text-sm: 0.875rem;                            /* Small Text */
  --text-xs: 0.75rem;                             /* Caption */

  /* ========================================================================
     SPACING & LAYOUT
     ======================================================================== */

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-fluid: clamp(2rem, 5vw, 5rem);

  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ========================================================================
     EFFECTS
     ======================================================================== */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow-blue: 0 0 15px rgba(37, 99, 235, 0.5);
  --shadow-glow-violet: 0 0 15px rgba(139, 92, 246, 0.5);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(12px);

  --glass-dark-bg: rgba(15, 23, 42, 0.6);
  --glass-dark-border: rgba(255, 255, 255, 0.1);
  
  /* Transitions */
  --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================================================
   UTILITY CLASSES (Base)
   ======================================================================== */

.bg-gradient-hero {
  background: linear-gradient(135deg, var(--brokar-blue-900) 0%, var(--brokar-blue-800) 100%);
}

.text-gradient-primary {
  background: linear-gradient(135deg, var(--brokar-blue-400), var(--brokar-violet-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-accent {
  background: linear-gradient(135deg, var(--brokar-cyan-400), var(--brokar-blue-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}

.button-primary {
  background: var(--brokar-blue-600);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  transition: var(--transition-bounce);
  border: none;
  cursor: pointer;
}

.button-primary:hover {
  background: var(--brokar-blue-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-blue);
}