/* ==========================================================================
   START: CSS VARIABLES & DESIGN SYSTEM TOKENS
   ========================================================================== */

:root {
  /* Branding Colors */
  --catcel-orange: #FF5A00;
  --catcel-orange-hover: #E04F00;
  --catcel-orange-light: rgba(255, 90, 0, 0.1);
  --catcel-blue: #2b5ebb;
  --catcel-blue-light: #3e76d6;
  --catcel-blue-dark: #1b4588;
  --catcel-blue-rgba: rgba(43, 94, 187, 0.05);

  /* Light Theme Utilities */
  --text-dark: #1F2937;
  --text-muted: #4B5563;
  --text-light: #F9FAFB;
  --bg-light: #F3F4F6;
  --bg-white: #FFFFFF;
  --border-color: #E5E7EB;

  /* Accent Highlight Colors */
  --accent-green: #00A859;
  --accent-green-light: rgba(0, 168, 89, 0.1);
  --accent-blue: #0077C2;
  --accent-blue-light: rgba(0, 119, 194, 0.1);
  --accent-purple: #7C3AED;
  --accent-purple-light: rgba(124, 58, 237, 0.1);

  /* Typography System */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--catcel-blue-dark) 0%, var(--catcel-blue) 100%);
  --gradient-accent: linear-gradient(135deg, var(--catcel-orange) 0%, #FF8C42 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);

  /* Premium Box Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);
  --shadow-premium: 0 30px 60px rgba(0, 0, 0, 0.12), 0 15px 30px rgba(0, 0, 0, 0.06);
  --shadow-glow-blue: 0 15px 35px rgba(43, 94, 187, 0.2);
  --shadow-glow-orange: 0 15px 35px rgba(255, 90, 0, 0.2);
  
  /* Borders & Transitions */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --transition-speed: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Buttery smooth */
}

/* ==========================================================================
   END: CSS VARIABLES & DESIGN SYSTEM TOKENS
   ========================================================================== */