:root {
    /* --- Typography --- */
    --font: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-xxs: 0.6875rem; /* 11 */
    --fs-xs: 0.75rem; /* 12 */
    --fs-sm: 0.8125rem; /* 13 */
    --fs-base: 0.875rem; /* 14 */
    --fs-md: 0.9375rem; /* 15 */
    --fs-lg: 1.0625rem; /* 17 */
    --fs-xl: 1.375rem; /* 22 */
    --fs-2xl: 1.75rem; /* 28 */

    /* --- Spacing --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 56px;

    /* --- Radii --- */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* --- Elevation. Shape only; the tint comes from the theme. --- */
    --sh-xs: 0 1px 2px rgba(var(--shadow-rgb), .06);
    --sh-sm: 0 2px 6px rgba(var(--shadow-rgb), .06), 0 1px 2px rgba(var(--shadow-rgb), .04);
    --sh-md: 0 6px 20px rgba(var(--shadow-rgb), .08), 0 2px 6px rgba(var(--shadow-rgb), .04);
    --sh-lg: 0 18px 44px rgba(var(--shadow-rgb), .14), 0 6px 14px rgba(var(--shadow-rgb), .06);
    --sh-xl: 0 32px 70px rgba(var(--scrim-rgb), .22);
    --sh-cta: 0 8px 22px rgba(var(--cta-rgb), .32);

    /* --- Motion --- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .16s;
    --t-base: .26s;
    --t-slow: .42s;

    /* --- Layout --- */
    --shell: 1600px;
    --gutter: var(--sp-6);
    --header-h: 68px;
    --summary-h: 104px;
    --sticky-top: calc(var(--header-h) + var(--summary-h) + var(--sp-4));
    --filters-w: 314px;
}