:root {
    /* Brand & Palette */
    --brand: #F55722; /* Primary brand orange */
    --brand-contrast: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --surface: #ffffff;
    --surface-muted: #f7f7f8;
    --border-color: rgba(0, 0, 0, 0.08);

    /* Typography */
    --font-sans: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    --fs-900: clamp(2.25rem, 2vw + 1.25rem, 3rem);
    --fs-700: clamp(1.5rem, 1vw + 1rem, 2rem);
    --fs-400: 1rem;
    --lh-tight: 1.2;
    --lh-normal: 1.6;

    /* Unified Spacing Scale - Mobile First, Scalable */
    --space-1: 0.25rem;                                    /* 4px */
    --space-2: 0.5rem;                                     /* 8px */
    --space-3: 0.75rem;                                    /* 12px */
    --space-4: 1rem;                                       /* 16px */
    --space-5: 1.25rem;                                    /* 20px */
    --space-6: 1.5rem;                                     /* 24px */
    --space-8: 2rem;                                       /* 32px */
    --space-10: 2.5rem;                                    /* 40px */
    --space-12: 3rem;                                      /* 48px */
    --space-16: 4rem;                                      /* 64px */
    --space-20: 5rem;                                      /* 80px */
    --space-24: 6rem;                                      /* 96px */
    --space-32: 8rem;                                      /* 128px */
    
    /* Responsive Spacing (using clamp for fluid scaling) - Optimized for visual balance */
    --space-section-y: clamp(3.5rem, 6vw, 6rem);           /* Standard section spacing - optimized balance */
    --space-section-y-compact: clamp(2.5rem, 4vw, 4rem); /* Compact sections (stats, CTAs) - tighter */
    --space-section-y-large: clamp(4.5rem, 7.5vw, 7rem);   /* Large sections (hero, major features) - more spacious */
    --space-section-gap: clamp(1rem, 2.5vw, 1.5rem);      /* 16px - 24px: gap between section items */
    --space-section-between: clamp(0.5rem, 1vw, 1rem);     /* 8px - 16px: subtle padding between sections */
    --space-section-divider: clamp(1px, 0.1vw, 2px);      /* Section divider thickness */
    --space-header-gap: clamp(0.375rem, 1vw, 0.625rem);   /* 6px - 10px: header internal spacing */
    --space-header-margin: clamp(1.25rem, 3vw, 2rem);      /* Optimized header margin - balanced spacing */
    --space-title-margin: clamp(0.625rem, 1.5vw, 1rem);   /* 10px - 16px: title bottom margin - tighter */
    --space-subtitle-margin: clamp(1rem, 2.5vw, 1.75rem); /* 16px - 28px: subtitle bottom margin - optimized */
    --space-card-padding: clamp(1rem, 2.5vw, 1.5rem);     /* 16px - 24px: card padding */
    --space-card-gap: clamp(1rem, 3vw, 2rem);             /* 16px - 32px: gap in card grids */
    --space-content-gap: clamp(0.75rem, 1.6vw, 1rem);     /* slightly tighter content gaps */
    --space-grid-gap: clamp(1rem, 2vw, 1.75rem);          /* 16px - 28px: standard grid gap */

    /* Radius & Elevation */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px; /* pill buttons/controls */
    --elev-1: 0 6px 24px rgba(0, 0, 0, 0.08);
    --elev-2: 0 10px 40px rgba(0, 0, 0, 0.16);

    /* Component max widths */
    --form-desktop-max: 520px;
    --form-mobile-max: 520px;
    --form-container-gutter: var(--space-2); /* horizontal breathing space inside cards */
    --content-max-width: 900px; /* Standard content max width */
    --section-divider-max-width: 1100px; /* Max width for section dividers */
    --input-padding-x: var(--space-3); /* Input horizontal padding */
    --input-padding-y: var(--space-3); /* Input vertical padding */
    --logo-min-height: var(--space-16); /* Minimum logo height */



    /* Footer grid behavior */
    --footer-col-min: 130px;

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

    /* Navigation */
    --header-height: 56px; /* mobile default */
    --header-height-lg: 80px; /* desktop */
    --nav-link-font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
    --nav-link-gap: clamp(0.75rem, 2vw, 1.5rem);
    --overlay-scrim: rgba(0,0,0,0.35);

    /* Gradients & Effects */
    --brand-gradient: linear-gradient(135deg, var(--brand) 0%, #FF7A45 60%, #FF9F6E 100%);
    --cta-gradient: linear-gradient(135deg, #3A1C71 0%, #D76D77 50%, #FFAF7B 100%);
    --focus-outline: var(--brand);

    /* Motion Tokens */
    --motion-duration-fast: 280ms;
    --motion-duration-medium: 600ms;
    --motion-duration-slow: 900ms;
    --motion-ease-out-3: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-out-2: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-stagger-step: 90ms;
}

/* Utilities */
.elev-1 { box-shadow: var(--elev-1); }
.elev-2 { box-shadow: var(--elev-2); }

.glass-surface {
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.btn-brand {
    background: var(--brand);
    color: var(--brand-contrast);
}

.text-brand { color: var(--brand); }
.bg-surface { background: var(--surface); }
.border-subtle { border: 1px solid var(--border-color); }