:root {
    /* Color Palette */
    --bg-color: #fcfcfc;       /* Off-white background */
    --bg-secondary: #f0f0f0;   /* Light grey for cards/sections */
    --text-primary: #121212;   /* Crisp black */
    --text-secondary: #555555; /* Dark grey for secondary text */
    --accent-color: #0d5c5a;   /* Deep Teal - Primary Brand Color */
    --accent-hover: #0a4645;   /* Darker teal for hover states */
    --white: #ffffff;
    
    /* Typography */
    --font-main: 'Inter', sans-serif;
    --h1-size: 4.5rem;   /* Massive headings */
    --h2-size: 3rem;
    --h3-size: 1.5rem;
    --body-size: 1.125rem;

    /* Spacing & Layout */
    --container-width: 1200px;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem; /* Lots of negative space */

    /* UI Components */
    --radius-sm: 4px;
    --radius-md: 8px; /* Slightly rounded, clean */
    --shadow-subtle: 0 4px 20px rgba(0,0,0,0.03); /* Very subtle shadows */
    --border-color: #e5e5e5;
}

/* Media Queries for Typography */
@media (max-width: 768px) {
    :root {
        --h1-size: 3rem;
        --h2-size: 2.25rem;
        --spacing-xl: 4rem;
    }
}