:root {
    /* Colors */
    --color-L0: #000;
    --color-L5: #0A0A0D;
    --color-L6: #0C0C0F;
    --color-L7: #0E0E11;
    --color-L8: #101013;
    --color-L9: #131316;
    --color-L10: #151619;
    --color-L15: #222226;
    --color-L16: #252529;
    --color-L17: #28282C;
    --color-L18: #2A2A2E;
    --color-L19: #2C2C30;
    --color-L20: #2E2E33;
    --color-L25: #3A3A40;
    --color-L30: #46474C;
    --color-L35: #525359;
    --color-L50: #707280;
    --color-L60: #8A8B99;
    --color-L70: #A8A9B2;
    --color-L80: #C4C5CC;
    --color-L90: #E1E1E5;
    --color-L95: #F0F0F2;
    --color-L100: #FFF;

    --color-surface-primary: var(--color-L5);
    --color-surface-secondary: var(--color-L15);
    --color-surface-tertiary: var(--color-L20);

    --color-skin-primary: var(--color-L30);
    --color-skin-secondary: var(--color-L25);
    --color-skin-tertiary: var(--color-L20);

    --color-component-primary: var(--color-L20);
    --color-component-secondary: var(--color-L30);
    --color-component-tertiary: var(--color-L35);

    --color-component-deep-primary: var(--color-L5);
    --color-component-deep-secondary: var(--color-L10);
    --color-component-deep-tertiary: var(--color-L15);

    --color-details-primary: var(--color-L100);
    --color-details-secondary: var(--color-L90);
    --color-details-tertiary: var(--color-L100);

    --color-equipment-primary: var(--color-L100);
    --color-equipment-secondary: var(--color-L90);

    --color-text-primary: var(--color-L100);
    --color-text-secondary: var(--color-L80);
    --color-text-tertiary: var(--color-L80);

    /* Text Styles */
    --font-home1A-family: 'Eina Bold';
    --font-home1A-size: 110px;
    --font-home1A-style: normal;
    --font-home1A-weight: 400;
    --font-home1A-height: 100%;
    --font-home1A-spacing: -2.2px;

    --font-home2A-family: 'Eina Bold';
    --font-home2A-size: 46px;
    --font-home2A-style: normal;
    --font-home2A-weight: 400;
    --font-home2A-height: 100%;
    --font-home2A-spacing: -0.684px;
    
    --font-display1B-family: 'Eina Bold';
    --font-display1B-size: 34px;
    --font-display1B-style: normal;
    --font-display1B-weight: 400;
    --font-display1B-height: 100%;
    --font-display1B-spacing: -0.612px;

    --font-headline2B-family: 'Eina SemiBold';
    --font-headline2B-size: 22px;
    --font-headline2B-style: normal;
    --font-headline2B-weight: 400;
    --font-headline2B-height: 110%;
    --font-headline2B-spacing: -0.352px;

    --font-title1B-family: 'Eina SemiBold';
    --font-title1B-size: 18px;
    --font-title1B-style: normal;
    --font-title1B-weight: 400;
    --font-title1B-height: 100%;
    --font-title1B-spacing: -0.225px;

    --font-title2B-family: 'Eina SemiBold';
    --font-title2B-size: 15px;
    --font-title2B-style: normal;
    --font-title2B-weight: 400;
    --font-title2B-height: 100%;
    --font-title2B-spacing: -0.225px;

    --font-paragraphR-family: 'Eina Regular';
    --font-paragraphR-size: 15px;
    --font-paragraphR-style: normal;
    --font-paragraphR-weight: 400;
    --font-paragraphR-height: 150%;
    --font-paragraphR-spacing: -0.225px;

    --font-paragraphB-family: 'Eina SemiBold';
    --font-paragraphB-size: 15px;
    --font-paragraphB-style: normal;
    --font-paragraphB-weight: 400;
    --font-paragraphB-height: 150%;
    --font-paragraphB-spacing: -0.225px;

    --font-smallR-family: 'Eina Regular';
    --font-smallR-size: 13px;
    --font-smallR-style: normal;
    --font-smallR-weight: 400;
    --font-smallR-height: 150%;
    --font-smallR-spacing: -0.195px;

}

/* Font Styles */

.home1A {
    font-family: var(--font-home1A-family), system-ui;
    font-size: var(--font-home1A-size);
    font-style: var(--font-home1A-style);
    font-weight: var(--font-home1A-weight);
    line-height: var(--font-home1A-height);
    letter-spacing: var(--font-home1A-spacing);
}

.home2A {
    font-family: var(--font-home2A-family), system-ui;
    font-size: var(--font-home2A-size);
    font-style: var(--font-home2A-style);
    font-weight: var(--font-home2A-weight);
    line-height: var(--font-home2A-height);
    letter-spacing: var(--font-home2A-spacing);
}

.display1B {
    font-family: var(--font-display1B-family), system-ui;
    font-size: var(--font-display1B-size);
    font-style: var(--font-display1B-style);
    font-weight: var(--font-display1B-weight);
    line-height: var(--font-display1B-height);
    letter-spacing: var(--font-display1B-spacing);
}

.headline2B {
    font-family: var(--font-headline2B-family), system-ui;
    font-size: var(--font-headline2B-size);
    font-style: var(--font-headline2B-style);
    font-weight: var(--font-headline2B-weight);
    line-height: var(--font-headline2B-height);
    letter-spacing: var(--font-headline2B-spacing);
}

.title1B {
    font-family: var(--font-title1B-family), system-ui;
    font-size: var(--font-title1B-size);
    font-style: var(--font-title1B-style);
    font-weight: var(--font-title1B-weight);
    line-height: var(--font-title1B-height);
    letter-spacing: var(--font-title1B-spacing);
}

.title2B {
    font-family: var(--font-title2B-family), system-ui;
    font-size: var(--font-title2B-size);
    font-style: var(--font-title2B-style);
    font-weight: var(--font-title2B-weight);
    line-height: var(--font-title2B-height);
    letter-spacing: var(--font-title2B-spacing);
}

.paragraphR {
    font-family: var(--font-paragraphR-family), system-ui;
    font-size: var(--font-paragraphR-size);
    font-style: var(--font-paragraphR-style);
    font-weight: var(--font-paragraphR-weight);
    line-height: var(--font-paragraphR-height);
    letter-spacing: var(--font-paragraphR-spacing);
}

.paragraphB {
    font-family: var(--font-paragraphB-family), system-ui;
    font-size: var(--font-paragraphB-size);
    font-style: var(--font-paragraphB-style);
    font-weight: var(--font-paragraphB-weight);
    line-height: var(--font-paragraphB-height);
    letter-spacing: var(--font-paragraphB-spacing);
}

.smallR {
    font-family: var(--font-smallR-family), system-ui;
    font-size: var(--font-smallR-size);
    font-style: var(--font-smallR-style);
    font-weight: var(--font-smallR-weight);
    line-height: var(--font-smallR-height);
    letter-spacing: var(--font-smallR-spacing);
}

/* Unit */

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Font */

@font-face {
    font-family: 'Eina Regular';
    src: url("../assets/fonts/regular.ttf")
}

@font-face {
    font-family: 'Eina SemiBold';
    src: url("../assets/fonts/semibold.ttf")
}

@font-face {
    font-family: 'Eina Bold';
    src: url("../assets/fonts/bold.ttf")
}