:root {
    /* Colors - Brand & Accents — ChronoTask (Clean Blue) */
    --primary: #2563EB;
    /* Bright Blue */
    --primary-light: #60A5FA;
    --primary-gradient: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --accent-pink: #60A5FA;
    --accent-purple: #3B82F6;
    --accent-cyan: #93C5FD;
    --accent-orange: #F59E0B;

    /* Background Orb Colors - Soft Blues and Grays */
    --orb-color-1: #EFF6FF;
    --orb-color-2: #DBEAFE;

    /* Background Orb Colors - Alt */
    --orb-color-1-alt: #F3F4F6;
    --orb-color-2-alt: #E5E7EB;

    /* Colors - Backgrounds & Surfaces */
    --bg-dark: #F3F4F6;
    --bg-body: #F8F9FA;
    /* Very light gray/white matching ChronoTask */
    --bg-glass: rgba(255, 255, 255, 0.8);
    /* Clean frosted glass */
    --bg-glass-strong: rgba(255, 255, 255, 0.95);
    --bg-glass-hover: rgba(255, 255, 255, 0.9);
    --bg-card: rgba(255, 255, 255, 1);
    --border-glass: rgba(0, 0, 0, 0.05);
    /* Very subtle gray border */
    --border-color: rgba(0, 0, 0, 0.08);

    /* Colors - Text */
    --text-primary: #111827;
    --text-heading: #000000;
    --text-main: #374151;
    /* Dark gray */
    --text-secondary: #6B7280;
    /* Gray for subheading */
    --text-muted: #9CA3AF;
    --text-white: #ffffff;

    /* Typography — Outfit display + Inter body (matching open-design Dramatic system) */
    --font-family-base: 'Inter', system-ui, sans-serif;
    --font-family-heading: 'Outfit', 'Inter', system-ui, sans-serif;

    /* Spacing - Fluid using clamp for seamless scaling */
    --spacing-xs: clamp(0.2rem, 0.5vw, 0.25rem);
    --spacing-sm: clamp(0.4rem, 1vw, 0.5rem);
    --spacing-md: clamp(0.75rem, 2vw, 1rem);
    --spacing-lg: clamp(1rem, 3vw, 1.5rem);
    --spacing-xl: clamp(1.5rem, 5vw, 2.5rem);
    --spacing-2xl: clamp(2.5rem, 8vw, 4rem);
    --spacing-3xl: clamp(4rem, 12vw, 6rem);

    /* Effects - Clean Soft Shadows */
    --card-shadow-color: rgba(0, 0, 0, 0.02);
    --card-hover-shadow: rgba(0, 0, 0, 0.04);

    --shadow-premium:
        0 4px 6px -1px var(--card-shadow-color),
        0 10px 15px -3px var(--card-shadow-color),
        0 0 40px rgba(0, 0, 0, 0.02),
        inset 0 1px 1px rgba(255, 255, 255, 1);

    --shadow-premium-hover:
        0 10px 15px -3px var(--card-hover-shadow),
        0 15px 25px -5px var(--card-hover-shadow),
        0 0 30px rgba(0, 0, 0, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 1);

    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px -3px rgba(0, 0, 0, 0.05);
    /* Clean shadow */
    --shadow-lg: 0 25px 60px -12px rgba(0, 0, 0, 0.08);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.04);
    /* Soft glass glow */

    --blur-glass: 20px;
    /* Slightly reduced blur for sharper glass feel */
    --radius-sm: 12px;
    --radius-md: 24px;
    --radius-lg: 40px;
    --radius-xl: 60px;

    /* Transitions */
    --transition-fast: 0.2s ease-out;
    --transition-base: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    /* Reviews Section Responsive Padding */
    --reviews-padding-x: 60px;
    --reviews-padding-y: 0;
    --reviews-gap: 2.25rem;
}

@media (prefers-color-scheme: dark) {
    /* Define dark mode overrides if needed, keeping it light for now as per image, 
       but setting structure for future. */
    /* :root {
        --bg-body: #0f172a;
        --bg-glass: rgba(15, 23, 42, 0.6);
        --text-main: #f8fafc;
        --text-secondary: #94a3b8;
    } */
}