:root {
    /* ==================================================
       Base sizing
       - Set this once. Everything scales from here.
       - If a site sets html { font-size: 10px }, then 1rem == 10px.
       ================================================== */
    --papi2-fs-base: 16px;
    /* base font-size unit */
    --papi2-scale: 1.333;
    /* modular scale ratio */

    /* ==================================================
       Colors (bases in HEX; variants via color-mix in oklab)
       Variants: l-* (lighten), d-* (darken), t-* (transparent)
       - 3 light, 3 dark for each palette color
       - 10 transparencies (10..100) for the base only
       ================================================== */

    /* Palette bases (hex for readability) */
    --papi2-color--primary: #3366ff;
    /* cobalt-ish */
    --papi2-color--secondary: #17a2b8;
    /* teal-ish */
    --papi2-color--neutral: #777777;
    /* mid gray */

    /* Fixed colors */
    --papi2-color--black: #000000;
    --papi2-color--white: #ffffff;
    --papi2-color--text: #111111;
    --papi2-color--text-muted: #666666;

    /* ---------- Primary: light/dark ----------- */
    --papi2-color--primary-l-1: color-mix(in oklab, var(--papi2-color--primary), white 20%);
    --papi2-color--primary-l-2: color-mix(in oklab, var(--papi2-color--primary), white 40%);
    --papi2-color--primary-l-3: color-mix(in oklab, var(--papi2-color--primary), white 60%);
    --papi2-color--primary-d-1: color-mix(in oklab, var(--papi2-color--primary), black 20%);
    --papi2-color--primary-d-2: color-mix(in oklab, var(--papi2-color--primary), black 40%);
    --papi2-color--primary-d-3: color-mix(in oklab, var(--papi2-color--primary), black 60%);
    /* Primary transparencies (t-10 .. t-100) */
    --papi2-color--primary-t-10: color-mix(in oklab, var(--papi2-color--primary), transparent 90%);
    --papi2-color--primary-t-20: color-mix(in oklab, var(--papi2-color--primary), transparent 80%);
    --papi2-color--primary-t-30: color-mix(in oklab, var(--papi2-color--primary), transparent 70%);
    --papi2-color--primary-t-40: color-mix(in oklab, var(--papi2-color--primary), transparent 60%);
    --papi2-color--primary-t-50: color-mix(in oklab, var(--papi2-color--primary), transparent 50%);
    --papi2-color--primary-t-60: color-mix(in oklab, var(--papi2-color--primary), transparent 40%);
    --papi2-color--primary-t-70: color-mix(in oklab, var(--papi2-color--primary), transparent 30%);
    --papi2-color--primary-t-80: color-mix(in oklab, var(--papi2-color--primary), transparent 20%);
    --papi2-color--primary-t-90: color-mix(in oklab, var(--papi2-color--primary), transparent 10%);
    --papi2-color--primary-t-100: var(--papi2-color--primary);

    /* ---------- Secondary: light/dark ---------- */
    --papi2-color--secondary-l-1: color-mix(in oklab, var(--papi2-color--secondary), white 20%);
    --papi2-color--secondary-l-2: color-mix(in oklab, var(--papi2-color--secondary), white 40%);
    --papi2-color--secondary-l-3: color-mix(in oklab, var(--papi2-color--secondary), white 60%);
    --papi2-color--secondary-d-1: color-mix(in oklab, var(--papi2-color--secondary), black 20%);
    --papi2-color--secondary-d-2: color-mix(in oklab, var(--papi2-color--secondary), black 40%);
    --papi2-color--secondary-d-3: color-mix(in oklab, var(--papi2-color--secondary), black 60%);
    /* Secondary transparencies for completeness (optional) */
    --papi2-color--secondary-t-10: color-mix(in oklab, var(--papi2-color--secondary), transparent 90%);
    --papi2-color--secondary-t-20: color-mix(in oklab, var(--papi2-color--secondary), transparent 80%);
    --papi2-color--secondary-t-30: color-mix(in oklab, var(--papi2-color--secondary), transparent 70%);
    --papi2-color--secondary-t-40: color-mix(in oklab, var(--papi2-color--secondary), transparent 60%);
    --papi2-color--secondary-t-50: color-mix(in oklab, var(--papi2-color--secondary), transparent 50%);
    --papi2-color--secondary-t-60: color-mix(in oklab, var(--papi2-color--secondary), transparent 40%);
    --papi2-color--secondary-t-70: color-mix(in oklab, var(--papi2-color--secondary), transparent 30%);
    --papi2-color--secondary-t-80: color-mix(in oklab, var(--papi2-color--secondary), transparent 20%);
    --papi2-color--secondary-t-90: color-mix(in oklab, var(--papi2-color--secondary), transparent 10%);
    --papi2-color--secondary-t-100: var(--papi2-color--secondary);

    /* ---------- Neutral: light/dark ------------- */
    --papi2-color--neutral-l-1: color-mix(in oklab, var(--papi2-color--neutral), white 20%);
    --papi2-color--neutral-l-2: color-mix(in oklab, var(--papi2-color--neutral), white 40%);
    --papi2-color--neutral-l-3: color-mix(in oklab, var(--papi2-color--neutral), white 60%);
    --papi2-color--neutral-d-1: color-mix(in oklab, var(--papi2-color--neutral), black 20%);
    --papi2-color--neutral-d-2: color-mix(in oklab, var(--papi2-color--neutral), black 40%);
    --papi2-color--neutral-d-3: color-mix(in oklab, var(--papi2-color--neutral), black 60%);
    /* Neutral transparencies (optional) */
    --papi2-color--neutral-t-10: color-mix(in oklab, var(--papi2-color--neutral), transparent 90%);
    --papi2-color--neutral-t-20: color-mix(in oklab, var(--papi2-color--neutral), transparent 80%);
    --papi2-color--neutral-t-30: color-mix(in oklab, var(--papi2-color--neutral), transparent 70%);
    --papi2-color--neutral-t-40: color-mix(in oklab, var(--papi2-color--neutral), transparent 60%);
    --papi2-color--neutral-t-50: color-mix(in oklab, var(--papi2-color--neutral), transparent 50%);
    --papi2-color--neutral-t-60: color-mix(in oklab, var(--papi2-color--neutral), transparent 40%);
    --papi2-color--neutral-t-70: color-mix(in oklab, var(--papi2-color--neutral), transparent 30%);
    --papi2-color--neutral-t-80: color-mix(in oklab, var(--papi2-color--neutral), transparent 20%);
    --papi2-color--neutral-t-90: color-mix(in oklab, var(--papi2-color--neutral), transparent 10%);
    --papi2-color--neutral-t-100: var(--papi2-color--neutral);

    /* ==================================================
       Spacing (space--xs .. space--4xl)
       - Base space ties to font base so everything scales together
       ================================================== */
    --papi2-space--xs: calc(var(--papi2-fs-base) * 0.5);
    --papi2-space--sm: calc(var(--papi2-space--xs) * var(--papi2-scale));
    --papi2-space--md: calc(var(--papi2-space--sm) * var(--papi2-scale));
    --papi2-space--lg: calc(var(--papi2-space--md) * var(--papi2-scale));
    --papi2-space--xl: calc(var(--papi2-space--lg) * var(--papi2-scale));
    --papi2-space--2xl: calc(var(--papi2-space--xl) * var(--papi2-scale));
    --papi2-space--3xl: calc(var(--papi2-space--2xl) * var(--papi2-scale));
    --papi2-space--4xl: calc(var(--papi2-space--3xl) * var(--papi2-scale));

    /* ==================================================
       Typography sizes (text--xs .. text--4xl)
       ================================================== */
    --papi2-text--xs: calc(var(--papi2-fs-base) * 0.75);
    --papi2-text--sm: calc(var(--papi2-text--xs) * var(--papi2-scale));
    --papi2-text--md: calc(var(--papi2-text--sm) * var(--papi2-scale));
    --papi2-text--lg: calc(var(--papi2-text--md) * var(--papi2-scale));
    --papi2-text--xl: calc(var(--papi2-text--lg) * var(--papi2-scale));
    --papi2-text--2xl: calc(var(--papi2-text--xl) * var(--papi2-scale));
    --papi2-text--3xl: calc(var(--papi2-text--2xl) * var(--papi2-scale));
    --papi2-text--4xl: calc(var(--papi2-text--3xl) * var(--papi2-scale));

    /* ==================================================
       Grids
       ================================================== */
    /* Fixed repeat grids (minmax(0,1fr)) */
    --papi2-grid--1: repeat(1, minmax(0, 1fr));
    --papi2-grid--2: repeat(2, minmax(0, 1fr));
    --papi2-grid--3: repeat(3, minmax(0, 1fr));
    --papi2-grid--4: repeat(4, minmax(0, 1fr));
    --papi2-grid--5: repeat(5, minmax(0, 1fr));
    --papi2-grid--6: repeat(6, minmax(0, 1fr));

    /* Auto-fit grids: repeat(auto-fit, minmax(min(W, 100%), 1fr)) */
    --papi2-grid-auto-fit-200: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    --papi2-grid-auto-fit-250: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    --papi2-grid-auto-fit-300: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    --papi2-grid-auto-fit-350: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    --papi2-grid-auto-fit-400: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    --papi2-grid-auto-fit-450: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
    --papi2-grid-auto-fit-500: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
    --papi2-grid-auto-fit-550: repeat(auto-fit, minmax(min(550px, 100%), 1fr));
    --papi2-grid-auto-fit-600: repeat(auto-fit, minmax(min(600px, 100%), 1fr));

    /* ==================================================
       Animation tokens
       ================================================== */
    --papi2-anim-duration--fast: 150ms;
    --papi2-anim-duration--medium: 300ms;
    --papi2-anim-duration--slow: 600ms;

    --papi2-anim-distance--short: calc(var(--papi2-fs-base) * 0.25);
    --papi2-anim-distance--medium: calc(var(--papi2-fs-base) * 0.5);
    --papi2-anim-distance--long: calc(var(--papi2-fs-base) * 1);

    /* ==================================================
       Shadows
       ================================================== */
    --papi2-shadow--s: 0 1px 2px rgba(0, 0, 0, 0.1);
    --papi2-shadow--l: 0 4px 8px rgba(0, 0, 0, 0.15);
    --papi2-shadow--xl: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ===========================================
     Optional utility classes (quick usage)
     =========================================== */

/* Example text utilities */
.papi2-text-xs {
    font-size: var(--papi2-text--xs);
}

.papi2-text-sm {
    font-size: var(--papi2-text--sm);
}

.papi2-text-md {
    font-size: var(--papi2-text--md);
}

.papi2-text-lg {
    font-size: var(--papi2-text--lg);
}

.papi2-text-xl {
    font-size: var(--papi2-text--xl);
}

.papi2-text-2xl {
    font-size: var(--papi2-text--2xl);
}

.papi2-text-3xl {
    font-size: var(--papi2-text--3xl);
}

.papi2-text-4xl {
    font-size: var(--papi2-text--4xl);
}

/* Example grid utilities */
.papi2-grid-3 {
    display: grid;
    grid-template-columns: var(--papi2-grid--3);
    gap: var(--papi2-space--md);
}

.papi2-grid-auto-300 {
    display: grid;
    grid-template-columns: var(--papi2-grid-auto-fit-300);
    gap: var(--papi2-space--md);
}