/**
 * ==============================================
 *                    Colors                    *
 * ==============================================
 */

/* ––––– Text ––––– */
:root {
    --GC-Text-Primary: #FFFFFF;
    --GC-Text-Secondary: #999999;
    --GC-Text-Secondary-hover: #727171;
    --GC-Text-Secondary-active: #4F4B4B;
    --GC-Text-Tetriary: #050505;
    --GC-Text-Link: #3CBFB4;
    --GC-Text-Link-hover: #34A89E;
    --GC-Text-Link-active: #2C8F87;
    --GC-Text-Accent: #3CBFB4;
}

/* ––––– Border ––––– */
:root {
    --GC-Border-Primary: #FFFFFF;
    --GC-Border-Secondary: #3CBFB4;
    --GC-Border-Tetirary: #999999;
}

/* ––––– Background ––––– */
:root {
    /* ----- Base ----- */
    --GC-Background-Base-Primary: #18191B;
    --GC-Background-Base-Secondary: #050505;
    --GC-Background-Base-Tetriary: #3CBFB4;
    
    /* ----- Button ----- */
    --GC-Background-Button-Primary: #3CBFB412;
    --GC-Background-Button-Primary-hover: #3CBFB421;
    --GC-Background-Button-Primary-active: #3CBFB42B;
}

/**
 * ==============================================
 *                  Typography                  *
 * ==============================================
 */

@font-face {
    font-family: PressStart-2P;
    src: url("/fonts/PressStart2P-Regular.woff2");
}

@font-face {
    font-family: "Geologica-Variable-New";
    src: url("/fonts/Geologica-VariableFont.woff2");
    font-display: swap;
}

/* ––––– PressStart2P ––––– */
:root {
    --PressStart2P-H2-font-size: 50px;
    --PressStart2P-H2-line-height: 60px;
    
    --PressStart2P-L-font-size: 32px;
    --PressStart2P-L-line-height: 40px;
    
    --PressStart2P-M-font-size: 28px;
    --PressStart2P-M-line-height: 36px;
    
    --PressStart2P-S-font-size: 16px;
    --PressStart2P-S-line-height: 20px;
}

/* ----- tablet ----- */
:root {
    --PressStart2P-tablet-H2-font-size: 32px;
    --PressStart2P-tablet-H2-line-height: 36px;
    
    --PressStart2P-tablet-H3-font-size: 20px;
    --PressStart2P-tablet-H3-line-height: 24px;
    
    --PressStart2P-tablet-L-font-size: 16px;
    --PressStart2P-tablet-L-line-height: 20px;
    
    --PressStart2P-tablet-M-font-size: 14px;
    --PressStart2P-tablet-M-line-height: 18px;

    --PressStart2P-tablet-S-font-size: 12px;
    --PressStart2P-tablet-S-line-height: 16px;
}

/* ----- mobile ----- */
:root {
    --PressStart2P-mobile-H2-font-size: 20px;
    --PressStart2P-mobile-H2-line-height: 24px;
    
    --PressStart2P-mobile-H3-font-size: 16px;
    --PressStart2P-mobile-H3-line-height: 22px;
    
    --PressStart2P-mobile-L-font-size: 12px;
    --PressStart2P-mobile-L-line-height: 16px;
    
    --PressStart2P-mobile-M-font-size: 10px;
    --PressStart2P-mobile-M-line-height: 14px;
}

/* ––––– Geologica ––––– */
:root {
    --Geologica-H1-font-size: 90px;
    --Geologica-H1-line-height: 100px;
    --Geologica-H1-variation-settings: "wght" 700, "SHRP" 100;
    
    --Geologica-XL-font-size: 44px;
    --Geologica-XL-line-height: 56px;
    --Geologica-XL-variation-settings: "wght" 350;
    
    --Geologica-L-font-size: 32px;
    --Geologica-L-line-height: 40px;
    --Geologica-L-variation-settings: "wght" 600, "SHRP" 100;
    
    --Geologica-M-font-size: 24px;
    --Geologica-M-line-height: 28px;
    --Geologica-M-variation-settings: "wght" 350;
    
    --Geologica-S-font-size: 20px;
    --Geologica-S-line-height: 24px;
    --Geologica-S-variation-settings: "wght" 350;
    
    --Geologica-XS1-font-size: 16px;
    --Geologica-XS1-line-height: 20px;
    --Geologica-XS1-variation-settings: "wght" 350;
    
    --Geologica-XS2-font-size: 16px;
    --Geologica-XS2-line-height: 20px;
    --Geologica-XS2-variation-settings: "wght" 600, "SHRP" 100;
}

/* ----- tablet ----- */
:root {
    --Geologica-tablet-H1-font-size: 68px;
    --Geologica-tablet-H1-line-height: 78px;
    --Geologica-tablet-H1-variation-settings: "wght" 700, "SHRP" 100;
    
    --Geologica-tablet-L-font-size: 18px;
    --Geologica-tablet-L-line-height: 22px;
    --Geologica-tablet-L-variation-settings: "wght" 350;

    --Geologica-tablet-L2-font-size: 18px;
    --Geologica-tablet-L2-line-height: 22px;
    --Geologica-tablet-L2-variation-settings: "wght" 700, "SHRP" 100;
    
    --Geologica-tablet-M-font-size: 14px;
    --Geologica-tablet-M-line-height: 18px;
    --Geologica-tablet-M-variation-settings: "wght" 350;
    
    --Geologica-tablet-S-font-size: 12px;
    --Geologica-tablet-S-line-height: 16px;
    --Geologica-tablet-S-variation-settings: "wght" 350;
    
    --Geologica-tablet-S2-font-size: 12px;
    --Geologica-tablet-S2-line-height: 16px;
    --Geologica-tablet-S2-variation-settings: "wght" 700, "SHRP" 100;
}

/* ----- mobile ----- */
:root {
    --Geologica-mobile-H1-font-size: 48px;
    --Geologica-mobile-H1-line-height: 58px;
    --Geologica-mobile-H1-variation-settings: "wght" 700, "SHRP" 100;
    
    --Geologica-mobile-L-font-size: 18px;
    --Geologica-mobile-L-line-height: 22px;
    --Geologica-mobile-L-variation-settings: "wght" 350;
    
    --Geologica-mobile-M-font-size: 14px;
    --Geologica-mobile-M-line-height: 18px;
    --Geologica-mobile-M-variation-settings: "wght" 350;
    
    --Geologica-mobile-S-font-size: 12px;
    --Geologica-mobile-S-line-height: 14px;
    --Geologica-mobile-S-variation-settings: "wght" 350;
}