@layer tokens {
  :root {
    /* === H1 VARIABLES === */
    --el-h1-color: var(--color-text-primary);
    --el-h1-font-family: var(--font-display);
    --el-h1-font-size: var(--typo-size-7xl);
    --el-h1-font-weight: var(--typo-weight-black);
    --el-h1-letter-spacing: -0.0137em;
    --el-h1-line-height: 1.125;
    --el-h1-text-transform: uppercase;
    --el-h1-vspace-base: calc(1em * var(--el-h1-line-height));
    --el-h1-vspace-top: calc(var(--el-h1-vspace-base) * var(--vspace-spacious));
    --el-h1-vspace-bottom: calc(var(--el-h1-vspace-base) * var(--vspace-comfortable));

    /* === H2 VARIABLES === */
    --el-h2-color: var(--color-text-primary);
    --el-h2-font-family: var(--font-header);
    --el-h2-font-size: var(--typo-size-5xl);
    --el-h2-font-weight: var(--typo-weight-black);
    --el-h2-letter-spacing: -0.0096em;;
    --el-h2-line-height: 1.1765;
    --el-h2-text-transform: uppercase;
    --el-h2-vspace-base: calc(1em * var(--el-h2-line-height));
    --el-h2-vspace-top: calc(var(--el-h2-vspace-base) * var(--vspace-snug));
    --el-h2-vspace-bottom: calc(var(--el-h2-vspace-base) * var(--vspace-compressed));

    /* === H3 VARIABLES === */
    --el-h3-color: var(--color-text-secondary);
    --el-h3-font-family: var(--font-header);
    --el-h3-font-size: var(--typo-size-4xl);
    --el-h3-font-weight: var(--typo-weight-extrabold);
    --el-h3-letter-spacing: -0.004em;
    --el-h3-line-height: 1.2;
    --el-h3-text-transform: uppercase;
    --el-h3-vspace-base: calc(1em * var(--el-h3-line-height));
    --el-h3-vspace-top: calc(var(--el-h3-vspace-base) * var(--vspace-cozy));
    --el-h3-vspace-bottom: calc(var(--el-h3-vspace-base) * var(--vspace-snug));

    /* === H4 VARIABLES === */
    --el-h4-color: var(--color-text-secondary);
    --el-h4-font-family: var(--font-header);
    --el-h4-font-size: var(--typo-size-3xl);
    --el-h4-font-weight: var(--typo-weight-extrabold);
    --el-h4-letter-spacing: 0.0025em;
    --el-h4-line-height: 1.125;
    --el-h4-text-transform: uppercase;
    --el-h4-vspace-base: calc(1em * var(--el-h4-line-height));
    --el-h4-vspace-top: calc(var(--el-h4-vspace-base) * var(--vspace-normal));
    --el-h4-vspace-bottom: calc(var(--el-h4-vspace-base) * var(--vspace-tight));

    /* === H5 VARIABLES === */
    --el-h5-color: var(--color-text-secondary);
    --el-h5-font-family: var(--font-header);
    --el-h5-font-size: var(--typo-size-2xl);
    --el-h5-font-weight: var(--typo-weight-extrabold);
    --el-h5-letter-spacing: 0.05em;
    --el-h5-line-height: 1.28;
    --el-h5-text-transform: uppercase;
    --el-h5-vspace-base: calc(1em * var(--el-h5-line-height));
    --el-h5-vspace-top: calc(var(--el-h5-vspace-base) * var(--vspace-cozy));
    --el-h5-vspace-bottom: calc(var(--el-h5-vspace-base) * var(--vspace-tight));

    /* === H6 VARIABLES === */
    --el-h6-color: var(--color-text-secondary);
    --el-h6-font-family: var(--font-header);
    --el-h6-font-size: var(--typo-size-xl);
    --el-h6-font-weight: var(--typo-weight-black);
    --el-h6-letter-spacing: 0.035em;
    --el-h6-line-height: 1.4;
    --el-h6-text-transform: uppercase;
    --el-h6-vspace-base: calc(1em * var(--el-h6-line-height));
    --el-h6-vspace-top: calc(var(--el-h6-vspace-base) * var(--vspace-snug));
    --el-h6-vspace-bottom: calc(var(--el-h6-vspace-base) * var(--vspace-compressed));

    /* === PARAGRAPH VARIABLES === */
    --el-p-color: var(--color-text-primary);
    --el-p-font-family: var(--font-body);
    --el-p-font-size: var(--typo-size-md);
    --el-p-font-weight: var(--typo-weight-regular);
    --el-p-line-height: var(--typo-leading-normal);
    --el-p-text-align: justify;
    --el-p-vspace-base: calc(1em * var(--el-p-line-height));
    --el-p-vspace-top: calc(var(--el-p-vspace-base) * var(--vspace-snug));
    --el-p-vspace-bottom: calc(var(--el-p-vspace-base) * var(--vspace-snug));

    /* === BLOCKQUOTE VARIABLES === */
    --el-blockquote-color: var(--color-text-tertiary);
    --el-border-color: var(--color-text-tertiary);
    --el-blockquote-font-family: var(--font-body);
    --el-blockquote-font-size: var(--typo-size-md);
    --el-blockquote-font-style: var(--typo-weight-regular);
    --el-blockquote-font-weight: var(--typo-weight-medium);
    --el-blockquote-line-height: var(--typo-leading-comfortable);
    --el-blockquote-vspace-base: calc(1em * var(--el-blockquote-line-height));
    --el-blockquote-vspace-top: calc(var(--el-blockquote-vspace-base) * var(--vspace-snug));
    --el-blockquote-vspace-bottom: calc(var(--el-blockquote-vspace-base) * var(--vspace-snug));

    /* === PRE VARIABLES === */
    --el-pre-color: var(--color-text-inverse);
    --el-pre-background: var(--color-surface-inverse);
    --el-pre-font-family: var(--font-mono);
    --el-pre-font-size: var(--typo-size-sm);
    --el-pre-line-height: 1.5385;
    --el-pre-vspace-base: calc(1em * var(--el-pre-line-height));
    --el-pre-vspace-top: calc(var(--el-pre-vspace-base) * var(--vspace-normal));
    --el-pre-vspace-bottom: calc(var(--el-pre-vspace-base) * var(--vspace-normal));

    /* === CODE VARIABLES === */
    --el-code-color: var(--color-text-inverse);
    --el-code-background: var(--color-surface-inverse);
    --el-code-font-family: var(--font-mono);
    --el-code-font-size: var(--typo-size-sm);

    /* === List Variables (For UL/OL) === */
    --el-list-color: var(--color-text-primary);
    --el-list-line-height: var(--typo-leading-normal);
    --el-list-font-size: var(--typo-size-md);
    --el-list-vspace-base: calc(1em * var(--el-list-line-height));
    --el-list-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
    --el-list-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
    --el-list-nested-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
    --el-list-nested-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
    --el-li-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
    --el-li-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
    --el-li-nested-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-tight));
    --el-li-nested-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-tight));

    /* === UL VARIABLES === */
    --el-ul-indent-l1: var(--spacing-cozy);
    --el-ul-indent-l2: var(--spacing-cozy);
    --el-ul-indent-l3: var(--spacing-cozy);
    --el-ul-indent-l4: var(--spacing-cozy);
    --el-ul-item-padding: var(--spacing-cozy);
    --el-ul-symbol-l1: '⯃';
    --el-ul-symbol-l1-color: var(--color-text-primary);
    --el-ul-symbol-l2: '⯁';
    --el-ul-symbol-l2-color: var(--color-text-primary);
    --el-ul-symbol-l3: '⯆';
    --el-ul-symbol-l3-color: var(--color-text-primary);
    --el-ul-symbol-l4: '⯀';
    --el-ul-symbol-l4-color: var(--color-text-primary);

    /* === OL VARIABLES === */
    --el-ol-indent-l1: var(--spacing-cozy);
    --el-ol-item-indent-l1: 1.5em;
    --el-ol-indent-l2: var(--spacing-cozy);
    --el-ol-item-indent-l2: 0.825em;
    --el-ol-indent-l3: var(--spacing-cozy);
    --el-ol-item-indent-l3: 0;
    --el-ol-indent-l4: var(--spacing-cozy);
    --el-ol-item-indent-l4: 0;
    --el-ol-item-padding: var(--spacing-cozy);
    --el-ol-line-height: var(--typo-leading-normal);
    --el-ol-marker-color-l1: var(--color-text-primary);
    --el-ol-prefix-l1: '';
    --el-ol-style-l1: decimal-leading-zero;
    --el-ol-suffix-l1: '.)';
    --el-ol-marker-color-l2: var(--color-text-primary);
    --el-ol-prefix-l2: '';
    --el-ol-style-l2: lower-alpha;
    --el-ol-suffix-l2: '.)';
    --el-ol-marker-color-l3: var(--color-text-primary);
    --el-ol-prefix-l3: '';
    --el-ol-style-l3: upper-roman;
    --el-ol-suffix-l3: '.)';
    --el-ol-marker-color-l4: var(--color-text-primary);
    --el-ol-prefix-l4: '';
    --el-ol-style-l4: lower-greek;
    --el-ol-suffix-l4: '.)';

    /* === DL VARIABLES === */
    --el-dl-font-size: var(--typo-size-md);
    --el-dl-line-height: var(--typo-leading-normal);
    --el-dl-vspace-base: calc(1em * var(--el-dl-line-height));
    --el-dl-vspace-top: calc(var(--el-dl-vspace-base) * var(--vspace-snug));
    --el-dl-vspace-bottom: calc(var(--el-dl-vspace-base) * var(--vspace-compressed));

    /* === DT VARIABLES === */
    --el-dt-color: var(--color-text-inverse);
    --el-dt-background: var(--color-surface-inverse);
    --el-dt-font-family: var(--font-mono);
    --el-dt-font-size: var(--typo-size-lg);
    --el-dt-font-weight: var(--typo-weight-bold);
    --el-dt-line-height: 1.4;
    --el-dt-text-transform: uppercase;
    --el-dt-letter-spacing: 0.035em;
    --el-dt-padding: var(--spacing-snug);
    --el-dt-vspace-base: calc(1em * var(--el-dt-line-height));
    --el-dt-vspace-top: calc(var(--el-dt-vspace-base) * var(--vspace-snug));
    --el-dt-vspace-bottom: calc(var(--el-dt-vspace-base) * var(--vspace-compressed));

    /* === DD VARIABLES === */
    --el-dd-color: var(--color-text-primary);
    --el-dd-font-family: var(--font-body);
    --el-dd-font-size: var(--typo-size-md);
    --el-dd-line-height: var(--typo-leading-normal);
    --el-dd-indent: 0;
    --el-dd-vspace-base: calc(1em * var(--el-dd-line-height));
    --el-dd-vspace-top: calc(var(--el-dd-vspace-base) * var(--vspace-compressed));
    --el-dd-vspace-bottom: calc(var(--el-dd-vspace-base) * var(--vspace-tight));

    /* === TABLE VARIABLES === */
    --el-table-font-size: var(--typo-size-sm);
    --el-table-line-height: 1.2;
    --el-table-border: var(--size-2) solid var(--color-text-primary);
    --el-table-vspace-top: var(--spacing-tight);
    --el-table-vspace-bottom: var(--spacing-tight);

    /* === TH VARIABLES === */
    --el-th-color: var(--color-text-inverse);
    --el-th-background: var(--color-surface-inverse);
    --el-th-font-family: var(--font-header);
    --el-th-font-size: var(--typo-size-sm);
    --el-th-font-weight: var(--typo-weight-black);
    --el-th-text-transform: uppercase;
    --el-th-line-height: var(--el-table-line-height);
    --el-th-padding: 0 var(--spacing-snug) var(--spacing-snug);

    /* === TD VARIABLES === */
    --el-td-color: var(--color-text-primary);
    --el-td-font-family: var(--font-mono);
    --el-td-font-size: var(--typo-size-sm);
    --el-td-line-height: var(--el-table-line-height);
    --el-td-padding: var(--spacing-snug);
    --el-td-border: var(--size-1) solid var(--color-text-secondary);

    /* === CAPTION VARIABLES === */
    --el-caption-color: var(--color-text-tertiary);
    --el-caption-font-family: var(--font-body);
    --el-caption-font-size: var(--typo-size-sm);
    --el-caption-font-style: italic;
    --el-caption-text-align: center;

    /* === FIGCAPTION VARIABLES === */
    --el-figcaption-color: var(--color-text-tertiary);
    --el-figcaption-font-family: var(--font-body);
    --el-figcaption-font-size: var(--typo-size-xs);
    --el-figcaption-font-style: italic;
    --el-figcaption-text-align: center;

    /* === SMALL VARIABLES === */
    --el-small-color: var(--color-text-tertiary);
    --el-small-font-family: var(--font-body);
    --el-small-font-size: var(--typo-size-xs);

    /* HR */
    --hr-height: var(--size-3);
    --hr-margin: var(--spacing-relaxed) 0;
    --hr-color: var(--color-text-tertiary);
    --hr-symbol-content: "▼";
    --hr-symbol-size: var(--typo-size-4xl);
    --hr-symbol-space: 0 0.25em;
    --hr-symbol-line-height: var(--typo-leading-compressed);
    --hr-symbol-color: var(--color-text-tertiary);
    --hr-symbol-background: var(--color-surface-base);

    /* Header */
    --el-header-font-size: var(--typo-size-responsive);
    --el-header-line-height: var(--typo-leading-snug);
    --el-header-paddingY: var(--spacing-snug);
    --el-header-height: calc(
        (var(--typo-size-responsive) * var(--el-header-line-height)) +
        (var(--el-header-paddingY) * 2)
    );
  }
}