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

    /* == Font Families == */
    --font-header: var(--font-geist-sans);
    --font-display: var(--font-blaka);
    --font-body: var(--font-iosevka-slab);
    --font-mono: var(--font-iosevka-mono);

    /* == Font Sizes == */
    --typo-size-responsive: clamp(1rem, 2.5vw, 1.5rem);
    --typo-size-base: 16px;
    --typo-size-8xl: 8em;
    --typo-size-7xl: 6.375em;
    --typo-size-6xl: 5.0625em;
    --typo-size-5xl: 4em;
    --typo-size-4xl: 3.1875em;
    --typo-size-3xl: 2.5em;
    --typo-size-2xl: 2em;
    --typo-size-xl: 1.5625em;
    --typo-size-lg: 1.25em;
    --typo-size-md: 1em;
    --typo-size-sm: 0.8125em;
    --typo-size-xs: 0.625em;
    --typo-size-2xs: 0.5em;

    /* == Font Weights == */
    --typo-weight-thin: 100;
    --typo-weight-extralight: 200;
    --typo-weight-light: 300;
    --typo-weight-normal: 400;
    --typo-weight-medium: 500;
    --typo-weight-semibold: 600;
    --typo-weight-bold: 700;
    --typo-weight-extrabold: 800;
    --typo-weight-black: 900;

    /* == Letter Spacing == */
    --typo-spacing-tightest: -0.05em;
    --typo-spacing-tighter: -0.025em;
    --typo-spacing-tight: -0.0125em;
    --typo-spacing-normal: 0em;
    --typo-spacing-relaxed: 0.025em;
    --typo-spacing-comfortable: 0.05em;
    --typo-spacing-loose: 0.1em;
    --typo-spacing-looser: 0.15em;
    --typo-spacing-loosest: 0.2em;

    /* == Line Height == */
    --typo-leading-compressed: 1.0;
    --typo-leading-tight: 1.125;
    --typo-leading-snug: 1.25;
    --typo-leading-cozy: 1.375;
    --typo-leading-normal: 1.5;
    --typo-leading-relaxed: 1.625;
    --typo-leading-comfortable: 1.75;
    --typo-leading-loose: 1.875;
    --typo-leading-spacious: 2.0;

    /* == Vertical Spacing == */
    --vspace-compressed: 0.25;
    --vspace-tight: 0.5;
    --vspace-snug: 0.75;
    --vspace-cozy: 1;
    --vspace-normal: 1.25;
    --vspace-relaxed: 1.5;
    --vspace-comfortable: 1.75;
    --vspace-loose: 2;
    --vspace-spacious: 2.5;
  }
}