:root {
    /* Brand colors */
    --color-bg: #ffffff;
    --color-surface: #f5f5f5;
    --color-surface-strong: #c5c5c5;
    --color-text: #131313;
    --color-text-muted: #444c56;
    --color-primary: #5e0dd3;
    --color-secondary: #fd252a;
    --color-accent: #c7016a;
    --color-accent-2: #1343f4;
    --color-accent-3: #ffa84b;
    --color-black: #131313;
    --color-white: #ffffff;
    --color-border: rgba(19, 19, 19, 0.18);
    --color-border-soft: rgba(19, 19, 19, 0.12);
    --color-overlay: rgba(0, 0, 0, 0.32);
    --color-overlay-strong: rgba(0, 0, 0, 0.62);
    --color-glass: rgba(255, 255, 255, 0.12);
    --color-nav: rgba(0, 0, 0, 0.94);

    /* Typography */
    --font-body: "Roboto", sans-serif;
    --font-heading: itc-avant-garde-gothic-pro, sans-serif;
    --font-display: "DM Serif Display", serif;
    --font-ui: "Space Grotesk", sans-serif;

    --text-base: 1rem;
    --text-sm: 0.875rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-meta: 0.75rem;
    --text-label: 0.9375rem;
    --text-h6: 1rem;
    --text-h5: 1.1667rem;
    --text-h4: clamp(1.125rem, 2.2vw, 1.5rem);
    --text-h3: clamp(1.625rem, 3vw, 2.25rem);
    --text-h2: clamp(2rem, 4vw, 3rem);
    --text-h1: clamp(2.5rem, 5vw, 3.75rem);
    --text-mega: clamp(2.5rem, 5vw, 4rem);
    --text-giga: clamp(3rem, 7vw, 5rem);
    --text-tera: clamp(4rem, 8vw, 7rem);

    --line-height-body: 1.65;
    --line-height-tight: 1.05;
    --tracking-heading: -0.03em;
    --tracking-ui: 0.08em;
    --tracking-category: 0.12em;

    /* Spacing scale */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    --space-stack: var(--space-md);
    --space-grid: var(--space-md);
    --space-card: 1.25rem;
    --space-card-lg: 3rem;
    --space-button-y: 0.85rem;
    --space-button-x: 1.5rem;
    --space-field-y: 0.85rem;
    --space-field-x: 1rem;
    --space-section: clamp(3rem, 7vw, 6rem);
    --space-section-tight: clamp(3rem, 6vw, 5rem);

    /* Layout */
    --container-sm: 42rem;
    --container-md: 60rem;
    --container-lg: 71.25rem;
    --size-nav-height: 80px;
    --size-logo-width: clamp(6rem, 12vw, 7.5rem);
    --size-menu-width: 33px;
    --size-menu-height: 30px;
    --size-menu-bar-height: 4px;
    --size-bar-offset-1: 3px;
    --size-bar-offset-2: 13px;
    --size-bar-offset-3: 23px;
    --size-pagination-width: 25rem;
    --size-media-card-min: 18rem;
    --size-card-thumb-min: 40vh;
    --size-textarea-min: 10rem;
    --size-hero-min: clamp(28rem, 70vh, 48rem);
    --size-page-cover-min: clamp(18rem, 40vh, 26rem);
    --size-hero-slide-min: clamp(24rem, 65vh, 38rem);
    --size-hero-slide-desktop: 500px;
    --size-media-hero-50: 50vh;
    --size-media-hero-75: 75vh;
    --size-media-hero-100: 100vh;

    /* Shape and depth */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;

    --shadow-sm: 0 10px 30px rgba(19, 19, 19, 0.08);
    --shadow-md: 0 24px 60px rgba(19, 19, 19, 0.16);

    /* Motion */
    --focus-ring: 0 0 0 3px rgba(19, 67, 244, 0.24);
    --transition-fast: 180ms ease;
    --transition-base: 280ms ease;
}