:root {
    /* Color Palette (STRICT) */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-blue: #0B5ED7;
    --color-red: #FF2B2B;
    --color-gray-light: #F5F5F5;

    /* Functional Colors */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-light);
    --bg-dark: var(--color-black);
    --text-primary: var(--color-black);
    --text-inverse: var(--color-white);
    --border-color: var(--color-black);

    /* Neobrutalism Tokens */
    --shadow-distance: 4px;
    --shadow-color: var(--color-black);
    --shadow-main: var(--shadow-distance) var(--shadow-distance) 0 var(--shadow-color);
    --shadow-hover: 0 0 0 var(--shadow-color);
    /* For pressed state */

    /* Typography */
    --font-heading: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* Spacing */
    --spacing-xs: 0.5rem;
    /* 8px */
    --spacing-sm: 1rem;
    /* 16px */
    --spacing-md: 2rem;
    /* 32px */
    --spacing-lg: 4rem;
    /* 64px */
    --spacing-xl: 8rem;
    /* 128px */

    /* Borders & Structural */
    --border-width: 3px;
    --border-style: solid;
    --border-main: var(--border-width) var(--border-style) var(--color-black);

    /* Container Widths */
    --container-width: 1200px;
    --container-padding: var(--spacing-sm);
}