/* 
==================================================
VARIABLES & THEME CONFIGURATION
==================================================
*/

html {
    scroll-behavior: smooth;
}

:root {
    /* Colors */
    --color-primary: #0170B9; /* Digikref Blue */
    --color-primary-light: #e6f0f8;
    --color-bg: #FAFAFA; /* Soft white background */
    --color-card-bg: #FFFFFF; /* Pure white cards */
    --color-border: #E5E7EB; /* Softer border */
    --color-text-primary: #0F172A; /* Slate 900 - very premium dark */
    --color-text-secondary: #64748B; /* Slate 500 - elegant gray */
    --color-white: #FFFFFF;
    
    /* Typography */
    --font-primary: 'Inter', 'Poppins', sans-serif; /* Inter for SaaS feel */
    
    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Premium spring curve */
    
    /* Shadows */
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
}

/* 
==================================================
GLOBAL RESETS & BASE STYLES
==================================================
*/
body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Crisp typography */
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Bolder headings */
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.02em; /* Premium tight tracking */
    line-height: 1.2;
}

p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    font-size: 1.05rem; /* slightly larger body text for readability */
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: #015B96;
}

img {
    max-width: 100%;
    height: auto;
}

/* Section Spacing Utility */
.section-padding {
    padding: 120px 0; /* Increased breathing room */
}

@media (max-width: 768px) {
    .section-padding {
        padding: 80px 0;
    }
}