:root {
    /* Grid spacing */
    --sp: 8px;
    --sp0-5: calc(0.5 * var(--sp));
    --sp1: var(--sp);
    --sp1-5: calc(1.5 * var(--sp));
    --sp2: calc(2 * var(--sp));
    --sp2-5: calc(2.5 * var(--sp));
    --sp3: calc(3 * var(--sp));
    --sp4: calc(4 * var(--sp));
    --sp5: calc(5 * var(--sp));
    --sp6: calc(6 * var(--sp));
    --sp7: calc(7 * var(--sp));
    --sp8: calc(8 * var(--sp));
    --sp12: calc(12 * var(--sp));
    --sp16: calc(16 * var(--sp));
    --sp24: calc(24 * var(--sp));
    --sp32: calc(32 * var(--sp));

    /* Typography */
    --font-size: 16px;
    --font-size-small: 14px;
    --font-size-smaller: 12px;
    --font-size-large: 18px;
    --font-size-larger: 24px;
    --font-size-xl: 32px;
    --font-size-xxl: 48px;
    --font-weight: 400;
    --font-weight-bold: 600;
    --line-height: 1.5;

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-monospace: 'Fira Code', 'SF Mono', Consolas, monospace;
    --font-heading: 'Inter', var(--font-main);

    /* Commons */
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    /* Base colors - Light theme */
    --color-base-0: hsl(180deg, 5%, 100%);
    --color-base-1: hsl(180deg, 8%, 97%);
    --color-base-2: hsl(180deg, 6%, 93%);
    --color-base-3: hsl(180deg, 5%, 85%);
    --color-base-4: hsl(180deg, 4%, 70%);

    /* Text colors */
    --color-text-0: hsl(200deg, 25%, 12%);
    --color-text-1: hsl(200deg, 15%, 30%);
    --color-text-2: hsl(200deg, 10%, 50%);
    --color-text-3: hsl(200deg, 8%, 65%);

    /* Primary - Teal (Attuned, awareness) */
    --color-primary-0: hsl(175deg, 60%, 92%);
    --color-primary-1: hsl(175deg, 55%, 70%);
    --color-primary-2: hsl(175deg, 65%, 40%);
    --color-primary-3: hsl(175deg, 70%, 28%);
    --color-primary: var(--color-primary-2);
    --color-primary-text: #fff;

    /* Secondary - Amber (Business, success) */
    --color-secondary-0: hsl(38deg, 95%, 92%);
    --color-secondary-1: hsl(38deg, 90%, 70%);
    --color-secondary-2: hsl(38deg, 85%, 50%);
    --color-secondary-3: hsl(38deg, 80%, 38%);
    --color-secondary: var(--color-secondary-2);
    --color-secondary-text: hsl(38deg, 80%, 15%);

    /* Tertiary - Violet (Transformation) */
    --color-tertiary-0: hsl(270deg, 60%, 95%);
    --color-tertiary-1: hsl(270deg, 55%, 75%);
    --color-tertiary-2: hsl(270deg, 50%, 55%);
    --color-tertiary-3: hsl(270deg, 55%, 40%);
    --color-tertiary: var(--color-tertiary-2);
    --color-tertiary-text: #fff;

    /* Success - Green */
    --color-success-0: hsl(145deg, 55%, 92%);
    --color-success-1: hsl(145deg, 50%, 65%);
    --color-success-2: hsl(145deg, 55%, 42%);
    --color-success-3: hsl(145deg, 60%, 32%);
    --color-success: var(--color-success-2);
    --color-success-text: #fff;

    /* Warning - Orange */
    --color-warning-0: hsl(28deg, 90%, 92%);
    --color-warning-1: hsl(28deg, 85%, 70%);
    --color-warning-2: hsl(28deg, 80%, 55%);
    --color-warning-3: hsl(28deg, 75%, 45%);
    --color-warning: var(--color-warning-2);
    --color-warning-text: hsl(28deg, 80%, 15%);

    /* Danger - Red */
    --color-danger-0: hsl(0deg, 70%, 95%);
    --color-danger-1: hsl(0deg, 65%, 70%);
    --color-danger-2: hsl(0deg, 70%, 50%);
    --color-danger-3: hsl(0deg, 75%, 38%);
    --color-danger: var(--color-danger-2);
    --color-danger-text: #fff;

    /* Component defaults */
    --background-color: var(--color-base-0);
    --text-color: var(--color-text-0);
    --content-max-width: 1200px;

    /* Shadows - Neo-brutal style */
    --shadow-brutal-sm: 2px 2px 0 var(--color-base-4);
    --shadow-brutal: 4px 4px 0 var(--color-base-4);
    --shadow-brutal-lg: 6px 6px 0 var(--color-base-4);
    --shadow-brutal-xl: 8px 8px 0 var(--color-text-0);

    /* Colored shadows */
    --shadow-brutal-primary: 4px 4px 0 var(--color-primary-3);
    --shadow-brutal-secondary: 4px 4px 0 var(--color-secondary-3);
    --shadow-brutal-tertiary: 4px 4px 0 var(--color-tertiary-3);
    --shadow-brutal-danger: 4px 4px 0 var(--color-danger-2);

    /* Transitions */
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
}