:root {
    /* layout */
    --container-width: 1200px;
    --container-gutter-x: clamp(1rem, 3vw, 2rem);
    --sidebar-width: 17.5rem;
    --row-gap: clamp(1rem, 2.5vw, 2rem);
    --grid-gap: clamp(0.75rem, 2vw, 1.25rem);
    --section-gap: clamp(1.5rem, 4vw, 3rem);
    --control-height: 2.75rem;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --border-width: 1px;
    --sidebar-border-width: 4px;

    /* theme palette */
    --primary: 255 255 255;
    --secondary: 255 255 255;
    --accent: 255 255 0;
    --success: 255 255 255;
    --warning: 255 255 0;
    --error: 255 255 255;
    --white: 255 255 255;
    --black: 255 255 255;
    --yellow: 255 255 0;
    --body-background: 0 0 0;
    --surface-background: 0 0 0;
    --surface-alt: 17 17 17;
    --body-text: 255 255 255;
    --body-muted: 255 255 255;
    --border-color: 255 255 0;
    --background-image-shade-opacity: 0.78;

    /* font life */
    --font-display: 1rem;
    --font-display-xl: 4rem;
    --font-display-lg: 2rem;
    --font-display-md: 1.25rem;
    --font-bold: 700;
    --font-semi-bold: 600;
    --font-medium: 500;
    --font-regular: 400;
}

@media (max-width: 900px) {
    :root {
        --font-display-xl: 3rem;
        --font-display-lg: 1.75rem;
        --container-gutter-x: 1rem;
        --section-gap: 2rem;
    }
}

@media (max-width: 720px) {
    :root {
        --font-display-xl: 3rem;
        --font-display-lg: 1.75rem;
        --container-gutter-x: 0.75rem;
        --row-gap: 1rem;
        --grid-gap: 0.875rem;
        --section-gap: 1.5rem;
    }
}