:root {
  /* ---------------------------------------------------------
     1. COLOR PALETTE (Vibrant & High Pop)
     --------------------------------------------------------- */
  
  /* BACKGROUNDS: Pure White for maximum color contrast */
  --bg: #edf3fe; 
  /* A slight warm white for cards to separate them from the pure background */
  --card: #fdfdfd; 

  /* TYPOGRAPHY: 'Ink Blue' instead of grey. 
     This creates a subconscious link to the primary color. */
  --text: #0b1120; 
  --muted: #536b86;

  /* PRIMARY: "Electric Royal" 
     Much brighter and more saturated than the previous blue. */
  --primary: #2563eb;
  /* A richer pastel that is clearly visible (not invisible) */
  --primary-pastel: #dbeafe;

  /* SECONDARY: "Vivid Clementine" 
     A high-energy orange that demands attention. */
  --secondary: #f97316;
  /* A warm peach pastel */
  --secondary-pastel: #ffedd5;

  /* ACCENT: "Electric Violet" 
     Used for the 'SaaS' gradients. */
  --accent: #8b5cf6;

  /* BORDERS: Slightly stronger to define shapes */
  --line: rgba(37, 99, 235, 0.1);

  /* ---------------------------------------------------------
     2. GRADIENTS (Visible & Cheerful)
     --------------------------------------------------------- */
  
  /* Primary Gradient: Blue to Violet (Modern Tech feel) */
  --grad-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  
  /* Secondary Gradient: Orange to Pink (Friendly & Warm) */
  --grad-secondary: linear-gradient(135deg, #f97316 0%, #db2777 100%);

  /* The Ambient Background Glow (More Opaque)
     We increased opacity from 0.12 to 0.18 so you can actually SEE the colors. */
  --ambient-light: 
    radial-gradient(1000px 1000px at 0% 0%, rgba(37, 99, 235, 0.08), transparent 60%),
    radial-gradient(1000px 1000px at 100% 0%, rgba(249, 115, 22, 0.08), transparent 50%);

  /* ---------------------------------------------------------
     3. SURFACES & DEPTH
     --------------------------------------------------------- */

  /* Shadows: Slightly blue-tinted shadows for a "cleaner" look */
  --shadow: 0 20px 40px -12px rgba(37, 99, 235, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.04);
  --shadow-soft: 0 4px 12px -4px rgba(0, 0, 0, 0.05);

  --radius: 20px;
  --radius-lg: 32px;
  --max: 1200px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}