/***
  =================================================================================
    Hospitality Design System Tokens
    Auto-generated by the Figma plugin HospitalityTokensExporter
  =================================================================================
***/
:root {
    color-scheme: light dark;

    /**
    * =================================================================================
    * COLOR REFERENCES - Do not use directly (use COLOR SYSTEMS for UI implementation)
    * =================================================================================
    */
    --hy-color-ref-primary-100: #ffffffff;
    --hy-color-ref-primary-99: #fcfcffff;
    --hy-color-ref-primary-98: #f7f9ffff;
    --hy-color-ref-primary-95: #e8f1ffff;
    --hy-color-ref-primary-90: #cfe5ffff;
    --hy-color-ref-primary-80: #99cbffff;
    --hy-color-ref-primary-70: #6bb0f2ff;
    --hy-color-ref-primary-60: #4e96d5ff;
    --hy-color-ref-primary-50: #2e7cbaff;
    --hy-color-ref-primary-40: #00629eff;
    --hy-color-ref-primary-35: #00568bff;
    --hy-color-ref-primary-30: #004a78ff;
    --hy-color-ref-primary-25: #003e66ff;
    --hy-color-ref-primary-20: #003355ff;
    --hy-color-ref-primary-15: #002844ff;
    --hy-color-ref-primary-10: #001d34ff;
    --hy-color-ref-primary-5: #001223ff;
    --hy-color-ref-primary-0: #000000ff;

    --hy-color-ref-secondary-100: #ffffffff;
    --hy-color-ref-secondary-99: #fcfcffff;
    --hy-color-ref-secondary-98: #f7f9ffff;
    --hy-color-ref-secondary-95: #e8f1ffff;
    --hy-color-ref-secondary-90: #d6e4f6ff;
    --hy-color-ref-secondary-80: #bac8daff;
    --hy-color-ref-secondary-70: #9facbeff;
    --hy-color-ref-secondary-60: #8492a3ff;
    --hy-color-ref-secondary-50: #6b7888ff;
    --hy-color-ref-secondary-40: #52606fff;
    --hy-color-ref-secondary-35: #465463ff;
    --hy-color-ref-secondary-30: #3b4857ff;
    --hy-color-ref-secondary-25: #303d4bff;
    --hy-color-ref-secondary-20: #24323fff;
    --hy-color-ref-secondary-15: #1a2734ff;
    --hy-color-ref-secondary-10: #0f1d2aff;
    --hy-color-ref-secondary-5: #05121fff;
    --hy-color-ref-secondary-0: #000000ff;

    --hy-color-ref-tertiary-100: #ffffffff;
    --hy-color-ref-tertiary-99: #f2fffbff;
    --hy-color-ref-tertiary-98: #e4fff9ff;
    --hy-color-ref-tertiary-95: #b3fff3ff;
    --hy-color-ref-tertiary-90: #7df6e6ff;
    --hy-color-ref-tertiary-80: #5edacaff;
    --hy-color-ref-tertiary-70: #3cbeafff;
    --hy-color-ref-tertiary-60: #02a294ff;
    --hy-color-ref-tertiary-50: #00867aff;
    --hy-color-ref-tertiary-40: #006a61ff;
    --hy-color-ref-tertiary-35: #005d55ff;
    --hy-color-ref-tertiary-30: #005049ff;
    --hy-color-ref-tertiary-25: #00443dff;
    --hy-color-ref-tertiary-20: #003732ff;
    --hy-color-ref-tertiary-15: #002b27ff;
    --hy-color-ref-tertiary-10: #00201cff;
    --hy-color-ref-tertiary-5: #001412ff;
    --hy-color-ref-tertiary-0: #000000ff;

    --hy-color-ref-error-100: #ffffffff;
    --hy-color-ref-error-99: #fffbffff;
    --hy-color-ref-error-98: #fff8f7ff;
    --hy-color-ref-error-95: #ffedeaff;
    --hy-color-ref-error-90: #ffdad6ff;
    --hy-color-ref-error-80: #ffb4abff;
    --hy-color-ref-error-70: #ff897dff;
    --hy-color-ref-error-60: #ff5449ff;
    --hy-color-ref-error-50: #de3730ff;
    --hy-color-ref-error-40: #ba1a1aff;
    --hy-color-ref-error-35: #a80710ff;
    --hy-color-ref-error-30: #93000aff;
    --hy-color-ref-error-25: #7e0007ff;
    --hy-color-ref-error-20: #690005ff;
    --hy-color-ref-error-15: #540003ff;
    --hy-color-ref-error-10: #410002ff;
    --hy-color-ref-error-5: #2d0001ff;
    --hy-color-ref-error-0: #000000ff;

    --hy-color-ref-neutral-100: #ffffffff;
    --hy-color-ref-neutral-99: #fcfcffff;
    --hy-color-ref-neutral-98: #f9f9fcff;
    --hy-color-ref-neutral-95: #f1f0f4ff;
    --hy-color-ref-neutral-90: #e2e2e5ff;
    --hy-color-ref-neutral-80: #c6c6c9ff;
    --hy-color-ref-neutral-70: #ababaeff;
    --hy-color-ref-neutral-60: #909094ff;
    --hy-color-ref-neutral-50: #76777aff;
    --hy-color-ref-neutral-40: #5d5e61ff;
    --hy-color-ref-neutral-35: #515255ff;
    --hy-color-ref-neutral-30: #45474aff;
    --hy-color-ref-neutral-25: #3a3b3eff;
    --hy-color-ref-neutral-20: #2f3033ff;
    --hy-color-ref-neutral-15: #242628ff;
    --hy-color-ref-neutral-10: #1a1c1eff;
    --hy-color-ref-neutral-5: #0f1113ff;
    --hy-color-ref-neutral-0: #000000ff;

    --hy-color-ref-neutral-variant-100: #ffffffff;
    --hy-color-ref-neutral-variant-99: #fcfcffff;
    --hy-color-ref-neutral-variant-98: #f7f9ffff;
    --hy-color-ref-neutral-variant-95: #edf1f9ff;
    --hy-color-ref-neutral-variant-90: #dfe3ebff;
    --hy-color-ref-neutral-variant-80: #c2c7ceff;
    --hy-color-ref-neutral-variant-70: #a7abb3ff;
    --hy-color-ref-neutral-variant-60: #8c9198ff;
    --hy-color-ref-neutral-variant-50: #73777eff;
    --hy-color-ref-neutral-variant-40: #5a5f65ff;
    --hy-color-ref-neutral-variant-35: #4e5359ff;
    --hy-color-ref-neutral-variant-30: #42474eff;
    --hy-color-ref-neutral-variant-25: #373c42ff;
    --hy-color-ref-neutral-variant-20: #2c3137ff;
    --hy-color-ref-neutral-variant-15: #21262cff;
    --hy-color-ref-neutral-variant-10: #171c22ff;
    --hy-color-ref-neutral-variant-5: #0c1117ff;
    --hy-color-ref-neutral-variant-0: #000000ff;

    --hy-color-ref-warning-100: #ffffffff;
    --hy-color-ref-warning-99: #fffbffff;
    --hy-color-ref-warning-98: #fff8f4ff;
    --hy-color-ref-warning-95: #fff0eaff;
    --hy-color-ref-warning-90: #ffe3d7ff;
    --hy-color-ref-warning-80: #ffc8b1ff;
    --hy-color-ref-warning-70: #ffaa85ff;
    --hy-color-ref-warning-60: #ff8a55ff;
    --hy-color-ref-warning-50: #ff6925ff;
    --hy-color-ref-warning-40: #ca4700ff;
    --hy-color-ref-warning-35: #7a4600ff;
    --hy-color-ref-warning-30: #772f00ff;
    --hy-color-ref-warning-25: #593200ff;
    --hy-color-ref-warning-20: #4b2200ff;
    --hy-color-ref-warning-15: #3b1f00ff;
    --hy-color-ref-warning-10: #2c1600ff;
    --hy-color-ref-warning-5: #1d0d00ff;
    --hy-color-ref-warning-0: #000000ff;

    /**
    * =================================================================================
    * PALETTE TOKENS
    * =================================================================================
    */
    --hy-color-pal-red-10: light-dark(#2c0303ff, #fbccccff);
    --hy-color-pal-red-30: light-dark(#8c0909ff, #f56c6cff);
    --hy-color-pal-red-50: light-dark(#eb1010ff, #eb1010ff);
    --hy-color-pal-red-70: light-dark(#f56c6cff, #8c0909ff);
    --hy-color-pal-red-90: light-dark(#fbccccff, #2c0303ff);
    --hy-color-pal-blue-10: light-dark(#021631ff, #cee2fdff);
    --hy-color-pal-blue-30: light-dark(#054394ff, #6ba9faff);
    --hy-color-pal-blue-50: light-dark(#0970f6ff, #0970f6ff);
    --hy-color-pal-blue-70: light-dark(#6ba9faff, #054394ff);
    --hy-color-pal-blue-90: light-dark(#cee2fdff, #021631ff);
    --hy-color-pal-green-10: light-dark(#0f340bff, #94e58cff);
    --hy-color-pal-green-30: light-dark(#1c5d15ff, #47d338ff);
    --hy-color-pal-green-50: light-dark(#28871eff, #28871eff);
    --hy-color-pal-green-70: light-dark(#47d338ff, #1c5d15ff);
    --hy-color-pal-green-90: light-dark(#94e58cff, #0f340bff);
    --hy-color-pal-green2-10: light-dark(#052a1fff, #73eec8ff);
    --hy-color-pal-green2-30: light-dark(#0b5740ff, #1be0a3ff);
    --hy-color-pal-green2-50: light-dark(#108561ff, #108561ff);
    --hy-color-pal-green2-70: light-dark(#1be0a3ff, #0b5740ff);
    --hy-color-pal-green2-90: light-dark(#73eec8ff, #052a1fff);
    --hy-color-pal-yellow-10: light-dark(#3d3313ff, #fff4ccff);
    --hy-color-pal-yellow-30: light-dark(#786518ff, #ffe998ff);
    --hy-color-pal-yellow-50: light-dark(#ffd500ff, #ffd500ff);
    --hy-color-pal-yellow-70: light-dark(#ffe998ff, #786518ff);
    --hy-color-pal-yellow-90: light-dark(#fff4ccff, #3d3313ff);
    --hy-color-pal-purple-10: light-dark(#330e4fff, #efe2faff);
    --hy-color-pal-purple-30: light-dark(#6a1ea5ff, #cca1eeff);
    --hy-color-pal-purple-50: light-dark(#9e4bdeff, #9e4bdeff);
    --hy-color-pal-purple-70: light-dark(#cca1eeff, #6a1ea5ff);
    --hy-color-pal-purple-90: light-dark(#efe2faff, #330e4fff);
    --hy-color-pal-pink-10: light-dark(#2b0618ff, #f9d0e4ff);
    --hy-color-pal-pink-30: light-dark(#841349ff, #ec77afff);
    --hy-color-pal-pink-50: light-dark(#de1f7aff, #de1f7aff);
    --hy-color-pal-pink-70: light-dark(#ec77afff, #841349ff);
    --hy-color-pal-pink-90: light-dark(#f9d0e4ff, #2b0618ff);
    --hy-color-pal-brown-10: light-dark(#432902ff, #e9d9c1ff);
    --hy-color-pal-brown-30: light-dark(#744804ff, #bc8c44ff);
    --hy-color-pal-brown-50: light-dark(#a66605ff, #a66605ff);
    --hy-color-pal-brown-70: light-dark(#bc8c44ff, #744804ff);
    --hy-color-pal-brown-90: light-dark(#e9d9c1ff, #432902ff);
    --hy-color-pal-orange-10: light-dark(#1f0a05ff, #f6cfc6ff);
    --hy-color-pal-orange-30: light-dark(#782712ff, #e9866dff);
    --hy-color-pal-orange-50: light-dark(#d1431fff, #d1431fff);
    --hy-color-pal-orange-70: light-dark(#e9866dff, #782712ff);
    --hy-color-pal-orange-90: light-dark(#f6cfc6ff, #1f0a05ff);

    /**
    * =================================================================================
    * COLOR SYSTEMS
    * =================================================================================
    */
    --hy-color-primary: light-dark(
        var(--hy-color-ref-primary-40),
        var(--hy-color-ref-primary-80)
    );
    --hy-color-on-primary: light-dark(
        var(--hy-color-ref-primary-100),
        var(--hy-color-ref-primary-20)
    );
    --hy-color-primary-container: light-dark(
        var(--hy-color-ref-primary-90),
        var(--hy-color-ref-primary-30)
    );
    --hy-color-on-primary-container: light-dark(
        var(--hy-color-ref-primary-10),
        var(--hy-color-ref-primary-90)
    );
    --hy-color-secondary: light-dark(
        var(--hy-color-ref-secondary-40),
        var(--hy-color-ref-secondary-80)
    );
    --hy-color-on-secondary: light-dark(
        var(--hy-color-ref-secondary-100),
        var(--hy-color-ref-secondary-20)
    );
    --hy-color-secondary-container: light-dark(
        var(--hy-color-ref-secondary-90),
        var(--hy-color-ref-secondary-30)
    );
    --hy-color-on-secondary-container: light-dark(
        var(--hy-color-ref-secondary-10),
        var(--hy-color-ref-secondary-90)
    );
    --hy-color-tertiary: light-dark(
        var(--hy-color-ref-tertiary-40),
        var(--hy-color-ref-tertiary-80)
    );
    --hy-color-on-tertiary: light-dark(
        var(--hy-color-ref-tertiary-100),
        var(--hy-color-ref-tertiary-20)
    );
    --hy-color-tertiary-container: light-dark(
        var(--hy-color-ref-tertiary-90),
        var(--hy-color-ref-tertiary-30)
    );
    --hy-color-on-tertiary-container: light-dark(
        var(--hy-color-ref-tertiary-10),
        var(--hy-color-ref-tertiary-90)
    );
    --hy-color-error: light-dark(
        var(--hy-color-ref-error-40),
        var(--hy-color-ref-error-80)
    );
    --hy-color-on-error: light-dark(
        var(--hy-color-ref-error-100),
        var(--hy-color-ref-error-20)
    );
    --hy-color-error-container: light-dark(
        var(--hy-color-ref-error-90),
        var(--hy-color-ref-error-30)
    );
    --hy-color-on-error-container: light-dark(
        var(--hy-color-ref-error-10),
        var(--hy-color-ref-error-90)
    );
    --hy-color-warning: light-dark(
        var(--hy-color-ref-warning-40),
        var(--hy-color-ref-warning-80)
    );
    --hy-color-on-warning: light-dark(
        var(--hy-color-ref-warning-100),
        var(--hy-color-ref-warning-20)
    );
    --hy-color-warning-container: light-dark(
        var(--hy-color-ref-warning-90),
        var(--hy-color-ref-warning-30)
    );
    --hy-color-on-warning-container: light-dark(
        var(--hy-color-ref-warning-10),
        var(--hy-color-ref-warning-90)
    );
    --hy-color-background: light-dark(
        var(--hy-color-ref-neutral-variant-99),
        var(--hy-color-ref-neutral-variant-5)
    );
    --hy-color-on-background: light-dark(
        var(--hy-color-ref-neutral-variant-10),
        var(--hy-color-ref-neutral-variant-90)
    );
    --hy-color-surface: light-dark(
        var(--hy-color-ref-neutral-variant-98),
        var(--hy-color-ref-neutral-variant-5)
    );
    --hy-color-on-surface: light-dark(
        var(--hy-color-ref-neutral-variant-10),
        var(--hy-color-ref-neutral-variant-90)
    );
    --hy-color-surface-variant: light-dark(
        var(--hy-color-ref-neutral-variant-90),
        var(--hy-color-ref-neutral-variant-30)
    );
    --hy-color-on-surface-variant: light-dark(
        var(--hy-color-ref-neutral-variant-30),
        var(--hy-color-ref-neutral-variant-80)
    );
    --hy-color-inverse-surface: light-dark(
        var(--hy-color-ref-neutral-variant-20),
        var(--hy-color-ref-neutral-variant-90)
    );
    --hy-color-inverse-on-surface: light-dark(
        var(--hy-color-ref-neutral-variant-95),
        var(--hy-color-ref-neutral-variant-20)
    );
    --hy-color-inverse-primary: light-dark(
        var(--hy-color-ref-primary-80),
        var(--hy-color-ref-primary-40)
    );
    --hy-color-outline: light-dark(
        var(--hy-color-ref-neutral-50),
        var(--hy-color-ref-neutral-60)
    );
    --hy-color-outline-variant: light-dark(
        var(--hy-color-ref-neutral-variant-80),
        var(--hy-color-ref-neutral-variant-30)
    );
    --hy-color-shadow: light-dark(
        var(--hy-color-ref-neutral-0),
        var(--hy-color-ref-neutral-0)
    );
    --hy-color-scrim: light-dark(
        var(--hy-color-ref-neutral-0),
        var(--hy-color-ref-neutral-0)
    );
    --hy-color-surface-tint: light-dark(
        var(--hy-color-ref-primary-40),
        var(--hy-color-ref-primary-80)
    );
    --hy-color-primary-fixed: light-dark(
        var(--hy-color-ref-primary-90),
        var(--hy-color-ref-primary-90)
    );
    --hy-color-on-primary-fixed: light-dark(
        var(--hy-color-ref-primary-10),
        var(--hy-color-ref-primary-10)
    );
    --hy-color-primary-fixed-dim: light-dark(
        var(--hy-color-ref-primary-80),
        var(--hy-color-ref-primary-80)
    );
    --hy-color-on-primary-fixed-variant: light-dark(
        var(--hy-color-ref-primary-30),
        var(--hy-color-ref-primary-30)
    );
    --hy-color-secondary-fixed: light-dark(
        var(--hy-color-ref-secondary-90),
        var(--hy-color-ref-secondary-90)
    );
    --hy-color-on-secondary-fixed: light-dark(
        var(--hy-color-ref-secondary-10),
        var(--hy-color-ref-secondary-10)
    );
    --hy-color-secondary-fixed-dim: light-dark(
        var(--hy-color-ref-secondary-80),
        var(--hy-color-ref-secondary-80)
    );
    --hy-color-on-secondary-fixed-variant: light-dark(
        var(--hy-color-ref-secondary-30),
        var(--hy-color-ref-secondary-30)
    );
    --hy-color-tertiary-fixed: light-dark(
        var(--hy-color-ref-tertiary-90),
        var(--hy-color-ref-tertiary-90)
    );
    --hy-color-on-tertiary-fixed: light-dark(
        var(--hy-color-ref-tertiary-10),
        var(--hy-color-ref-tertiary-10)
    );
    --hy-color-tertiary-fixed-dim: light-dark(
        var(--hy-color-ref-tertiary-80),
        var(--hy-color-ref-tertiary-80)
    );
    --hy-color-on-tertiary-fixed-variant: light-dark(
        var(--hy-color-ref-tertiary-30),
        var(--hy-color-ref-tertiary-30)
    );
    --hy-color-surface-dim: light-dark(
        var(--hy-color-ref-neutral-variant-90),
        var(--hy-color-ref-neutral-variant-5)
    );
    --hy-color-surface-bright: light-dark(
        var(--hy-color-ref-neutral-variant-98),
        var(--hy-color-ref-neutral-variant-20)
    );
    --hy-color-surface-container-lowest: light-dark(
        var(--hy-color-ref-neutral-variant-100),
        var(--hy-color-ref-neutral-variant-5)
    );
    --hy-color-surface-container-low: light-dark(
        var(--hy-color-ref-neutral-variant-98),
        var(--hy-color-ref-neutral-variant-10)
    );
    --hy-color-surface-container: light-dark(
        var(--hy-color-ref-neutral-variant-95),
        var(--hy-color-ref-neutral-variant-15)
    );
    --hy-color-surface-container-high: light-dark(
        var(--hy-color-ref-neutral-variant-90),
        var(--hy-color-ref-neutral-variant-20)
    );
    --hy-color-surface-container-highest: light-dark(
        var(--hy-color-ref-neutral-variant-80),
        var(--hy-color-ref-neutral-variant-25)
    );

    /**
    * =================================================================================
    * TYPOGRAPHIES REFERENCES
    * =================================================================================
    */
    --hy-typo-ref-display-large-font: Roboto;
    --hy-typo-ref-display-medium-font: Roboto;
    --hy-typo-ref-display-medium-weight: 400;
    --hy-typo-ref-display-medium-weight-emphasized: 500;
    --hy-typo-ref-display-medium-size: 45px;
    --hy-typo-ref-display-medium-line-height: 52px;
    --hy-typo-ref-display-medium-tracking: 0px;
    --hy-typo-ref-display-small-font: Roboto;
    --hy-typo-ref-headline-large-font: Roboto;
    --hy-typo-ref-headline-large-weight: 400;
    --hy-typo-ref-headline-large-weight-emphasized: 500;
    --hy-typo-ref-headline-large-size: 32px;
    --hy-typo-ref-headline-large-line-height: 40px;
    --hy-typo-ref-headline-large-tracking: 0px;
    --hy-typo-ref-headline-medium-font: Roboto;
    --hy-typo-ref-headline-medium-weight: 400;
    --hy-typo-ref-headline-medium-weight-emphasized: 500;
    --hy-typo-ref-headline-medium-size: 28px;
    --hy-typo-ref-headline-medium-line-height: 36px;
    --hy-typo-ref-headline-medium-tracking: 0px;
    --hy-typo-ref-headline-small-font: Roboto;
    --hy-typo-ref-title-large-font: Roboto;
    --hy-typo-ref-title-large-weight: 400;
    --hy-typo-ref-title-large-weight-emphasized: 500;
    --hy-typo-ref-title-large-size: 22px;
    --hy-typo-ref-title-large-line-height: 28px;
    --hy-typo-ref-title-large-tracking: 0px;
    --hy-typo-ref-title-medium-font: Roboto;
    --hy-typo-ref-title-medium-weight: 500;
    --hy-typo-ref-title-medium-weight-emphasized: 600;
    --hy-typo-ref-title-medium-size: 16px;
    --hy-typo-ref-title-medium-line-height: 24px;
    --hy-typo-ref-title-medium-tracking: 0.15px;
    --hy-typo-ref-headline-small-weight: 400;
    --hy-typo-ref-headline-small-weight-emphasized: 500;
    --hy-typo-ref-headline-small-size: 24px;
    --hy-typo-ref-headline-small-line-height: 32px;
    --hy-typo-ref-headline-small-tracking: 0px;
    --hy-typo-ref-display-small-weight: 400;
    --hy-typo-ref-display-small-weight-emphasized: 500;
    --hy-typo-ref-display-small-size: 36px;
    --hy-typo-ref-display-small-line-height: 44px;
    --hy-typo-ref-display-small-tracking: 0px;
    --hy-typo-ref-title-small-font: Roboto;
    --hy-typo-ref-body-large-font: Roboto;
    --hy-typo-ref-body-large-weight: 400;
    --hy-typo-ref-body-large-weight-emphasized: 500;
    --hy-typo-ref-body-large-size: 16px;
    --hy-typo-ref-body-large-line-height: 24px;
    --hy-typo-ref-body-large-tracking: 0.5px;
    --hy-typo-ref-title-small-weight: 500;
    --hy-typo-ref-title-small-weight-emphasized: 600;
    --hy-typo-ref-title-small-size: 14px;
    --hy-typo-ref-title-small-line-height: 20px;
    --hy-typo-ref-title-small-tracking: 0.1px;
    --hy-typo-ref-body-medium-font: Roboto;
    --hy-typo-ref-body-small-font: Roboto;
    --hy-typo-ref-body-small-weight: 400;
    --hy-typo-ref-body-small-weight-emphasized: 500;
    --hy-typo-ref-body-small-size: 12px;
    --hy-typo-ref-body-small-line-height: 16px;
    --hy-typo-ref-body-small-tracking: 0.4px;
    --hy-typo-ref-body-medium-weight: 400;
    --hy-typo-ref-body-medium-weight-emphasized: 500;
    --hy-typo-ref-body-medium-size: 14px;
    --hy-typo-ref-body-medium-line-height: 20px;
    --hy-typo-ref-body-medium-tracking: 0.25px;
    --hy-typo-ref-label-large-font: Roboto;
    --hy-typo-ref-label-large-weight: 500;
    --hy-typo-ref-label-large-weight-emphasized: 600;
    --hy-typo-ref-label-large-size: 14px;
    --hy-typo-ref-label-large-line-height: 20px;
    --hy-typo-ref-label-large-tracking: 0.1px;
    --hy-typo-ref-label-medium-font: Roboto;
    --hy-typo-ref-label-medium-weight: 500;
    --hy-typo-ref-label-medium-weight-emphasized: 600;
    --hy-typo-ref-label-medium-size: 12px;
    --hy-typo-ref-label-medium-line-height: 16px;
    --hy-typo-ref-label-medium-tracking: 0.5px;
    --hy-typo-ref-label-small-font: Roboto;
    --hy-typo-ref-label-small-weight: 500;
    --hy-typo-ref-label-small-weight-emphasized: 600;
    --hy-typo-ref-label-small-size: 11px;
    --hy-typo-ref-label-small-line-height: 16px;
    --hy-typo-ref-label-small-tracking: 0.5px;
    --hy-typo-ref-display-large-weight: 400;
    --hy-typo-ref-display-large-weight-emphasized: 500;
    --hy-typo-ref-display-large-size: 57px;
    --hy-typo-ref-display-large-line-height: 64px;
    --hy-typo-ref-display-large-tracking: -0.25px;

    /**
    * =================================================================================
    * TYPOGRAPHIES SYSTEMS
    * =================================================================================
    */
    --hy-typo-display-large: var(--hy-typo-ref-display-large-weight)
        var(--hy-typo-ref-display-large-size)/var(
            --hy-typo-ref-display-large-line-height
        )
        var(--hy-typo-ref-display-large-font);
    --hy-typo-display-large-emphasized: var(
            --hy-typo-ref-display-large-weight-emphasized
        )
        var(--hy-typo-ref-display-large-size)/var(
            --hy-typo-ref-display-large-line-height
        )
        var(--hy-typo-ref-display-large-font);
    --hy-typo-display-medium: var(--hy-typo-ref-display-medium-weight)
        var(--hy-typo-ref-display-medium-size)/var(
            --hy-typo-ref-display-medium-line-height
        )
        var(--hy-typo-ref-display-medium-font);
    --hy-typo-display-medium-emphasized: var(
            --hy-typo-ref-display-medium-weight-emphasized
        )
        var(--hy-typo-ref-display-medium-size)/var(
            --hy-typo-ref-display-medium-line-height
        )
        var(--hy-typo-ref-display-medium-font);
    --hy-typo-display-small: var(--hy-typo-ref-display-small-weight)
        var(--hy-typo-ref-display-small-size)/var(
            --hy-typo-ref-display-small-line-height
        )
        var(--hy-typo-ref-display-small-font);
    --hy-typo-display-small-emphasized: var(
            --hy-typo-ref-display-small-weight-emphasized
        )
        var(--hy-typo-ref-display-small-size)/var(
            --hy-typo-ref-display-small-line-height
        )
        var(--hy-typo-ref-display-small-font);
    --hy-typo-headline-large: var(--hy-typo-ref-headline-large-weight)
        var(--hy-typo-ref-headline-large-size)/var(
            --hy-typo-ref-headline-large-line-height
        )
        var(--hy-typo-ref-headline-large-font);
    --hy-typo-headline-large-emphasized: var(
            --hy-typo-ref-headline-large-weight-emphasized
        )
        var(--hy-typo-ref-headline-large-size)/var(
            --hy-typo-ref-headline-large-line-height
        )
        var(--hy-typo-ref-headline-large-font);
    --hy-typo-headline-medium: var(--hy-typo-ref-headline-medium-weight)
        var(--hy-typo-ref-headline-medium-size)/var(
            --hy-typo-ref-headline-medium-line-height
        )
        var(--hy-typo-ref-headline-medium-font);
    --hy-typo-headline-medium-emphasized: var(
            --hy-typo-ref-headline-medium-weight-emphasized
        )
        var(--hy-typo-ref-headline-medium-size)/var(
            --hy-typo-ref-headline-medium-line-height
        )
        var(--hy-typo-ref-headline-medium-font);
    --hy-typo-headline-small: var(--hy-typo-ref-headline-small-weight)
        var(--hy-typo-ref-headline-small-size)/var(
            --hy-typo-ref-headline-small-line-height
        )
        var(--hy-typo-ref-headline-small-font);
    --hy-typo-headline-small-emphasized: var(
            --hy-typo-ref-headline-small-weight-emphasized
        )
        var(--hy-typo-ref-headline-small-size)/var(
            --hy-typo-ref-headline-small-line-height
        )
        var(--hy-typo-ref-headline-small-font);
    --hy-typo-title-large: var(--hy-typo-ref-title-large-weight)
        var(--hy-typo-ref-title-large-size)/var(
            --hy-typo-ref-title-large-line-height
        )
        var(--hy-typo-ref-title-large-font);
    --hy-typo-title-large-emphasized: var(
            --hy-typo-ref-title-large-weight-emphasized
        )
        var(--hy-typo-ref-title-large-size)/var(
            --hy-typo-ref-title-large-line-height
        )
        var(--hy-typo-ref-title-large-font);
    --hy-typo-title-medium: var(--hy-typo-ref-title-medium-weight)
        var(--hy-typo-ref-title-medium-size)/var(
            --hy-typo-ref-title-medium-line-height
        )
        var(--hy-typo-ref-title-medium-font);
    --hy-typo-title-medium-emphasized: var(
            --hy-typo-ref-title-medium-weight-emphasized
        )
        var(--hy-typo-ref-title-medium-size)/var(
            --hy-typo-ref-title-medium-line-height
        )
        var(--hy-typo-ref-title-medium-font);
    --hy-typo-title-small: var(--hy-typo-ref-title-small-weight)
        var(--hy-typo-ref-title-small-size)/var(
            --hy-typo-ref-title-small-line-height
        )
        var(--hy-typo-ref-title-small-font);
    --hy-typo-title-small-emphasized: var(
            --hy-typo-ref-title-small-weight-emphasized
        )
        var(--hy-typo-ref-title-small-size)/var(
            --hy-typo-ref-title-small-line-height
        )
        var(--hy-typo-ref-title-small-font);
    --hy-typo-body-large: var(--hy-typo-ref-body-large-weight)
        var(--hy-typo-ref-body-large-size)/var(
            --hy-typo-ref-body-large-line-height
        )
        var(--hy-typo-ref-body-large-font);
    --hy-typo-body-large-emphasized: var(
            --hy-typo-ref-body-large-weight-emphasized
        )
        var(--hy-typo-ref-body-large-size)/var(
            --hy-typo-ref-body-large-line-height
        )
        var(--hy-typo-ref-body-large-font);
    --hy-typo-body-medium: var(--hy-typo-ref-body-medium-weight)
        var(--hy-typo-ref-body-medium-size)/var(
            --hy-typo-ref-body-medium-line-height
        )
        var(--hy-typo-ref-body-medium-font);
    --hy-typo-body-medium-emphasized: var(
            --hy-typo-ref-body-medium-weight-emphasized
        )
        var(--hy-typo-ref-body-medium-size)/var(
            --hy-typo-ref-body-medium-line-height
        )
        var(--hy-typo-ref-body-medium-font);
    --hy-typo-body-small: var(--hy-typo-ref-body-small-weight)
        var(--hy-typo-ref-body-small-size)/var(
            --hy-typo-ref-body-small-line-height
        )
        var(--hy-typo-ref-body-small-font);
    --hy-typo-body-small-emphasized: var(
            --hy-typo-ref-body-small-weight-emphasized
        )
        var(--hy-typo-ref-body-small-size)/var(
            --hy-typo-ref-body-small-line-height
        )
        var(--hy-typo-ref-body-small-font);
    --hy-typo-label-large: var(--hy-typo-ref-label-large-weight)
        var(--hy-typo-ref-label-large-size)/var(
            --hy-typo-ref-label-large-line-height
        )
        var(--hy-typo-ref-label-large-font);
    --hy-typo-label-large-emphasized: var(
            --hy-typo-ref-label-large-weight-emphasized
        )
        var(--hy-typo-ref-label-large-size)/var(
            --hy-typo-ref-label-large-line-height
        )
        var(--hy-typo-ref-label-large-font);
    --hy-typo-label-medium: var(--hy-typo-ref-label-medium-weight)
        var(--hy-typo-ref-label-medium-size)/var(
            --hy-typo-ref-label-medium-line-height
        )
        var(--hy-typo-ref-label-medium-font);
    --hy-typo-label-medium-emphasized: var(
            --hy-typo-ref-label-medium-weight-emphasized
        )
        var(--hy-typo-ref-label-medium-size)/var(
            --hy-typo-ref-label-medium-line-height
        )
        var(--hy-typo-ref-label-medium-font);
    --hy-typo-label-small: var(--hy-typo-ref-label-small-weight)
        var(--hy-typo-ref-label-small-size)/var(
            --hy-typo-ref-label-small-line-height
        )
        var(--hy-typo-ref-label-small-font);
    --hy-typo-label-small-emphasized: var(
            --hy-typo-ref-label-small-weight-emphasized
        )
        var(--hy-typo-ref-label-small-size)/var(
            --hy-typo-ref-label-small-line-height
        )
        var(--hy-typo-ref-label-small-font);

    /**
    * =================================================================================
    * RADIUS TOKENS
    * =================================================================================
    */
    --hy-radius-x-large: 32px;
    --hy-radius-large: 24px;
    --hy-radius-medium: 16px;
    --hy-radius-small: 8px;
    --hy-radius-x-small: 4px;

    /**
    * =================================================================================
    * SPACING TOKENS
    * =================================================================================
    */
    --hy-spacing-xx-large: 32px;
    --hy-spacing-x-large: 24px;
    --hy-spacing-large: 20px;
    --hy-spacing-medium-large: 18px;
    --hy-spacing-medium: 16px;
    --hy-spacing-medium-small: 12px;
    --hy-spacing-small: 8px;
    --hy-spacing-x-small: 4px;
    --hy-spacing-xx-small: 2px;

    /**
    * =================================================================================
    * STATE LAYERS TOKENS
    * =================================================================================
    */
    --hy-state-layer-small: 8%;
    --hy-state-layer-medium: 10%;
    --hy-state-layer-large: 16%;
    --hy-state-layer-x-large: 38%;
}