@layer tokens {
  :root {
    /* === DIMENSIONS === */

    /* == Base Size Units == */
    --size-0: 0;
    --size-px: 1px;
    --size-05: 0.125rem;
    --size-1: 0.25rem;
    --size-2: 0.5rem;
    --size-3: 0.75rem;
    --size-4: 1rem;
    --size-5: 1.25rem;
    --size-6: 1.5rem;
    --size-8: 2rem;
    --size-10: 2.5rem;
    --size-12: 3rem;
    --size-16: 4rem;
    --size-20: 5rem;
    --size-24: 6rem;
    --size-32: 8rem;
    --size-40: 10rem;
    --size-48: 12rem;
    --size-64: 16rem;
    --size-80: 20rem;
    --size-96: 24rem;
    --size-128: 32rem;
    --size-160: 40rem;
    --size-192: 48rem;
    --size-256: 64rem;
    --size-320: 80rem;
    --size-360: 90rem;
    --size-384: 96rem;
    --size-400: 100rem;
    --size-480: 120rem;

    /* == Flexible Dimensions == */
    --dim-full: 100%;
    --dim-1-2: 50%;
    --dim-1-3: 33.3333%;
    --dim-2-3: 66.6667%;
    --dim-1-4: 25%;
    --dim-2-4: var(--dim-1-2);
    --dim-3-4: 75%;
    --dim-1-5: 20%;
    --dim-2-5: 40%;
    --dim-3-5: 60%;
    --dim-4-5: 80%;
    --dim-1-6: 16.6667%;
    --dim-2-6: var(--dim-1-3);
    --dim-3-6: var(--dim-1-2);
    --dim-4-6: var(--dim-2-3);
    --dim-5-6: 83.3333%;
    --dim-1-8: 12.5%;
    --dim-2-8: var(--dim-1-4);
    --dim-3-8: 37.5%;
    --dim-4-8: var(--dim-1-2);
    --dim-5-8: 62.5%;
    --dim-6-8: var(--dim-3-4);
    --dim-7-8: 87.5%;
    --dim-1-10: 10%;
    --dim-2-10: var(--dim-1-5);
    --dim-3-10: 30%;
    --dim-4-10: var(--dim-2-5);
    --dim-5-10: var(--dim-1-2);
    --dim-6-10: var(--dim-3-5);
    --dim-7-10: 70%;
    --dim-8-10: var(--dim-4-5);
    --dim-9-10: 90%;
    --dim-1-12: 8.3333%;
    --dim-2-12: var(--dim-1-6);
    --dim-3-12: var(--dim-1-4);
    --dim-4-12: var(--dim-1-3);
    --dim-5-12: 41.6667%;
    --dim-6-12: var(--dim-1-2);
    --dim-7-12: 58.3333%;
    --dim-8-12: var(--dim-2-3);
    --dim-9-12: var(--dim-3-4);
    --dim-10-12: 83.3333%;
    --dim-11-12: 91.6667%;

    /* == Semantic Spacing == */;
    --spacing-none: var(--size-0);
    --spacing-hairline: var(--size-px);
    --spacing-tight: var(--size-1);
    --spacing-snug: var(--size-2);
    --spacing-cozy: var(--size-4);
    --spacing-comfortable: var(--size-6);
    --spacing-relaxed: var(--size-8);
    --spacing-spacious: var(--size-12);
    --spacing-generous: var(--size-16);
    --spacing-luxurious: var(--size-24);
    --spacing-expansive: var(--size-32);

    /* == Responsive Content Dimensions */
    --layout-max-width: 1280px;
    --content-max-width: 75ch;
  }
}