:root {
    /* colors */
    --color-black: #0a0a1a;
    --color-primary: #9112bc; /* button backgrounds, active link highlights */
    --color-secondary: #e5d5f2; /* section backgrounds, card backgrounds, soft dividers */
    --color-accent: #6f2dbd; /* button hover color, link hover, underlines. */

    /* fluid typography scale */
    --font-size-sm:   clamp(0.85rem, 0.80rem + 0.4vw, 1rem);
    --font-size-base: clamp(1rem,    0.95rem + 0.5vw, 1.125rem);
    --font-size-lg:   clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
    --font-size-xl:   clamp(1.5rem,  1.2rem + 1.2vw, 1.875rem);
    --font-size-2xl:  clamp(1.75rem, 1.4rem + 1.8vw, 2.25rem);
    --font-size-3xl:  clamp(2rem,    1.6rem + 3vw,   3.5rem);

    /* families */
    --font-family-base: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-family-heading: var(--font-family-base); /* alias for future swaps */

    /* weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* line-heights (unitless) */
    --lh-body: 1.6;
    --lh-heading: 1.25;

    /* Composite Font Tokens (shorthand: weight size/line family) */
    --font-sm: var(--weight-regular) var(--font-size-sm)/var(--lh-body) var(--font-family-base);
    --font-base: var(--weight-regular) var(--font-size-base)/var(--lh-body) var(--font-family-base);
    --font-lg: var(--weight-regular) var(--font-size-lg)/var(--lh-body) var(--font-family-base);
    --font-xl: var(--weight-semibold) var(--font-size-xl)/var(--lh-heading) var(--font-family-heading);
    --font-2xl: var(--weight-bold) var(--font-size-2xl)/var(--lh-heading) var(--font-family-heading);
    --font-3xl: var(--weight-bold) var(--font-size-3xl)/var(--lh-heading) var(--font-family-heading);

    /* spacing scale */
    --space-xs: 0.5rem;   /* very tight gaps (icons, button text) */
    --space-sm: 0.75rem;  /* small gaps (labels, small UI) */
    --space-md: 1rem;     /* base spacing (paragraphs, card padding) */
    --space-lg: 1.5rem;   /* medium gaps (card-to-card, grid gaps) */
    --space-xl: 2rem;     /* section padding, large blocks */
    --space-2xl: 3rem;    /* big breathing space between sections */
    --space-3xl: 4rem;    /* very large sections, hero padding */

    /* image sizes */
    --img-xxs: 40px;
    --img-xs: 75px;      /* small thumbnails (gallery previews, avatars) */
    --img-sm: 150px;        /* slightly larger previews or sidebar images */
    --img-base: 225px;        /* content images inside cards/sections */
    --img-md: 300px;        /* content images inside cards/sections */
    --img-lg: 400px;        /* article/project header images */
    --img-xl: 600px;       /* hero/banner images, full-width */
}