:root {
    font-size: 17px;
    --font-family: 'Inter', 'Roboto', sans-serif;

    --navbar-height: 4rem;
    --space-unit: 1.25rem;

    --clr-bg: #fdfdfc;
    --clr-text: #1b1b1b;
    --clr-text-muted: #666666;
    --clr-accent: #006d77;
    --clr-accent-light: #83c5be;
    --clr-accent-hover: #00545b;
    --clr-surface: #f1f1f1;
    --clr-surface-alt: #e9ecef;
    --clr-border: #d0d0d0;
    --clr-shadow: rgba(0, 0, 0, 0.06);
    --clr-shadow-strong: rgba(0, 109, 119, 0.18);

    --clr-bg-dark: #0e0f11;
    --clr-text-dark: #f8f9fa;
    --clr-text-muted-dark: #a9a9a9;
    --clr-accent-dark: #4ecdc4;
    --clr-accent-hover-dark: #3bb3a9;
    --clr-surface-dark: #181a1b;
    --clr-surface-alt-dark: #222426;
    --clr-border-dark: #333;
    --clr-shadow-dark: rgba(0, 0, 0, 0.6);
    --clr-shadow-strong-dark: rgba(78, 205, 196, 0.25);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background-color: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.7;
    transition: 
        background-color 0.4s ease,
        color 0.4s ease;
}

body.dark {
    background-color: var(--clr-bg-dark);
    color: var(--clr-text-dark);
}