/* ==================================================
   GLOBAL VARIABLES & DESIGN TOKENS
   ================================================== */

:root {

/* ================================= */
/*            TYPOGRAPHY
/* ================================= */

--primary-font: "ClashGrotesk", sans-serif;
--secondary-font: "Handelson", sans-serif;

--heading-1: clamp(48px, 6vw, 80px);
--heading-2: clamp(40px, 5vw, 64px);
--heading-3: clamp(36px, 4vw, 48px);
--heading-4: clamp(28px, 3.5vw, 36px);
--heading-5: clamp(24px, 3vw, 32px);
--heading-6: clamp(18px, 2.5vw, 24px);
--heading-quiz: clamp(56px, 5vw, 64px);

--text-body-big: clamp(20px, 2vw, 32px);
--text-body: clamp(16px, 1.75vw, 18px);
--text-body-small: clamp(12px, 1.75vw, 14px);
--text-body-xsmall: clamp(10px, 1.5vw, 12px);

--letter-spacing-xl: -6%;
--letter-spacing-md: -4%;
--letter-spacing-xs: -2%;

--primary-font-bold: 600;

/* ================================= */
/*          BORDER RADIUS
/* ================================= */

--border-radius-regular: 8px;
--border-radius-small: 4px;

/* ================================= */
/*             COLORS
/* ================================= */

/* 1. BRAND */

/* Teal */
--teal-900: #134E4A;
--teal-800: #115E59;
--teal-700: #0F766E;
--teal-600: #0D9488;
--teal-500: #14B8a3;
--teal-400: #2DD4BF;
--teal-300: #5EEAD4;
--teal-200: #99F6E4;
--teal-100: #CCFBF1;
--teal-50: #F0FDFA;

/* Blue */
--blue-950: #172554;
--blue-900: #1E3A8A;
--blue-800: #1E40AF;
--blue-700: #1D4ED8;
--blue-600: #2563EB;
--blue-500: #3B82F6;
--blue-400: #60A5FA;
--blue-300: #93C5FD;
--blue-200: #BFDBFE;
--blue-100: #DBEAFE;
--blue-50: #EFF6FF;

/* Green */
--green-900: #14532D;
--green-800: #166534;
--green-700: #15803D;
--green-600: #16A34A;
--green-500: #22C55E;
--green-400: #4ADE80;
--green-300: #86EFAC;
--green-200: #BBF7D0;
--green-100: #DCFCE7;
--green-50: #F0FDF4;

/* Yellow */
--yellow-900: #78350F;
--yellow-800: #92400E;
--yellow-700: #B45309;
--yellow-600: #D97706;
--yellow-500: #F59E0B;
--yellow-400: #FBBF24;
--yellow-300: #FCD34D;
--yellow-200: #FDE68A;
--yellow-100: #FEF3C7;
--yellow-50: #FFFBEB;

/* Red */
--red-900: #7F1D1D;
--red-800: #991B1B;
--red-700: #B91C1C;
--red-600: #DC2626;
--red-500: #EF4444;
--red-400: #F87171;
--red-300: #FCA5A5;
--red-200: #FECACA;
--red-100: #FEE2E2;
--red-50: #FEF2F2;

/* Grey */
--grey-900: #18181B;
--grey-800: #27272A;
--grey-700: #3F3F46;
--grey-600: #52525B;
--grey-500: #71717A;
--grey-400: #A1A1AA;
--grey-300: #D4D4D8;
--grey-200: #E4E4E7;
--grey-100: #F4F4F5;
--grey-50: #FAFAFA;

/* 2. ALIAS */

/* Primary */
--primary-darkest: var(--teal-900);
--primary-darker: var(--teal-800);
--primary-dark: var(--teal-700);
--primary-default: var(--teal-500);
--primary-light: var(--teal-200);
--primary-lighter: var(--teal-100);
--primary-lightest: var(--teal-50);

/* Secondary */
--secondary-darkest: var(--blue-950);
--secondary-darker: var(--blue-900);
--secondary-dark: var(--blue-800);
--secondary-default: var(--blue-700);
--secondary-light: var(--blue-300);
--secondary-lighter: var(--blue-200);
--secondary-lightest: var(--blue-100);

/* Neutral */
--main-background: #1B1B1E;
--neutral-darkest: var(--grey-800);
--neutral-darker: var(--grey-700);
--neutral-dark: var(--grey-500);
--neutral-default: var(--grey-400);
--neutral-light: var(--grey-200);
--neutral-lighter: var(--grey-100);
--neutral-lightest: var(--grey-50);

/* Error */
--error-darkest: var(--red-900);
--error-darker: var(--red-800);
--error-dark: var(--red-700);
--error-default: var(--red-600);
--error-light: var(--red-500);
--error-lighter: var(--red-400);
--error-lightest: var(--red-300);

/* Warning */
--warning-darkest: var(--yellow-900);
--warning-darker: var(--yellow-800);
--warning-dark: var(--yellow-700);
--warning-default: var(--yellow-500);
--warning-light: var(--yellow-300);
--warning-lighter: var(--yellow-200);
--warning-lightest: var(--yellow-100);

/* Success */
--secondary-darkest: var(--green-900);
--secondary-darker: var(--green-800);
--secondary-dark: var(--green-700);
--secondary-default: var(--green-500);
--secondary-light: var(--green-300);
--secondary-lighter: var(--green-200);
--secondary-lightest: var(--green-100);

}

/* ================================= */
/*            TYPOGRAPHY
/* ================================= */

.heading-1 {
    font-family: var(--primary-font);
    font-size: var(--heading-1);
    color: var(--primary-lightest);
    line-height: 90%;
    letter-spacing: var(--letter-spacing-xl);
}

.heading-2 {
    font-family: var(--primary-font);
    font-size: var(--heading-2);
    color: var(--primary-lightest);
    line-height: 90%;
    letter-spacing: var(--letter-spacing-xl);
}

.heading-3 {
    font-family: var(--primary-font);
    font-size: var(--heading-3);
    color: var(--primary-lightest);
    line-height: 90%;
    letter-spacing: var(--letter-spacing-xl);
}

.heading-4 {
    font-family: var(--primary-font);
    font-size: var(--heading-4);
    color: var(--primary-lightest);
    line-height: 90%;
    letter-spacing: var(--letter-spacing-xl);
}

.heading-5 {
    font-family: var(--primary-font);
    font-size: var(--heading-5);
    color: var(--primary-lighter);
    line-height: 90%;
    letter-spacing: var(--letter-spacing-md);
}

.heading-6 {
    font-family: var(--primary-font);
    font-size: var(--heading-6);
    color: var(--neutral-default);
    line-height: 90%;
    letter-spacing: var(--letter-spacing-md);
}
.heading-quiz {
    font-family: var(--secondary-font);
    font-size: var(--heading-quiz);
    color: var(--primary-lightest);
    line-height: 90%;
    letter-spacing: 0;
	font-weight: 400;
}

.text-body-big {
    font-family: var(--primary-font);
    font-size: var(--text-body-big);
    color: var(--primary-lightest);
    line-height: 110%;
    letter-spacing: var(--letter-spacing-xs);
}

.text-body {
    font-family: var(--primary-font);
    font-size: var(--text-body);
    color: var(--primary-lighter);
    line-height: 110%;
    letter-spacing: var(--letter-spacing-xs);
}

.text-body-small {
    font-family: var(--primary-font);
    font-size: var(--text-body-small);
    color: var(--primary-lightest);
    line-height: 120%;
    letter-spacing: var(--letter-spacing-xs);
}

.text-body-xsmall {
    font-family: var(--primary-font);
    font-size: var(--text-body-xsmall);
    color: var(--primary-lightest);
    line-height: 110%;
}

.heading-bold {
    font-weight: var(--primary-font-bold);
}

/* ================================= */
/*             BUTTONS
/* ================================= */

.button-squared-regular {
    background-color: rgba(255,255,255, 0);
    color: var(--neutral-lightest);
    border: 1px solid var(--neutral-dark);
    border-radius: var(--border-radius-regular);
}

.button-squared-regular:hover {
    background-color: rgba(255,255,255, 0);
    border: 1px solid var(--primary-lightest);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.button-squared-regular:active {
    background-color: var(--primary-dark);
    border: 1px solid var(--primary-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.button-squared-regular:focus {
    background-color: var(--primary-darkest);
    border: 1px solid var(--primary-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.button-squared-regular:disabled {
    background-color: var(--neutral-darker);
    color: var(--neutral-default);
    border: 1px solid var(--neutral-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}
/*
.button-choice-regular {
    background-color: rgba(255,255,255, 0);
    color: var(--neutral-lightest);
    border: 1px solid var(--neutral-dark);
    border-radius: var(--border-radius-regular);
}


.button-choice-regular:hover {
    background-color: rgba(255,255,255, 0);
    border: 1px solid var(--primary-lightest);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.button-choice-regular:active {
    background-color: var(--primary-dark);
    border: 1px solid var(--primary-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.button-choice-regular:focus {
    background-color: var(--primary-darkest);
    border: 1px solid var(--primary-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.button-choice-regular:disabled {
    background-color: var(--neutral-darker);
    color: var(--neutral-default);
    border: 1px solid var(--neutral-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}
*/
.button-choice-small {
    background-color: rgba(255,255,255, 0);
    color: var(--neutral-lightest);
    border: 1px solid var(--neutral-dark);
    border-radius: var(--border-radius-regular);
}

.button-choice-small:hover {
    background-color: rgba(255,255,255, 0);
    border: 1px solid var(--primary-lightest);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.button-choice-small:active {
    background-color: var(--primary-dark);
    border: 1px solid var(--primary-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.button-choice-small:focus {
    background-color: var(--primary-darkest);
    border: 1px solid var(--primary-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.button-choice-small:disabled {
    background-color: var(--neutral-darker);
    color: var(--neutral-default);
    border: 1px solid var(--neutral-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.link-regular {
    color: var(--neutral-lightest);
}

.link-regular:hover {
    color: var(--neutral-default);
}

.link-regular:active {
    color: var(--neutral-dark);
}

.link-regular:focus {
    color: var(--neutral-lightest);
}

.link-regular:disabled {
    color: var(--neutral-default);
    opacity: .4;
}

.link-small {
    color: var(--neutral-lightest);
}

.link-small:hover {
    color: var(--neutral-default);
}

.link-small:active {
    color: var(--neutral-dark);
}

.link-small:focus {
    color: var(--neutral-lightest);
}

.link-small:disabled {
    color: var(--neutral-default);
    opacity: .4;
}

/* ================================= */
/*              CARD
/* ================================= */

.card {
    background-color: rgba(255,255,255, 0);
    min-width: 324px;
    max-width: 440px;
    padding: 40px;
    border: 1px solid var(--neutral-darker);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.card:hover {
    background-color: rgba(255,255,255, 0);
    border: 1px solid var(--primary-lightest);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.card:active {
    background-color: var(--primary-dark);
    border: 1px solid var(--primary-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.card:focus {
    background-color: var(--primary-darkest);
    border: 1px solid var(--primary-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

.card:disabled {
    background-color: var(--neutral-darker);
    border: 1px solid var(--neutral-default);
    color: var(--neutral-default);
    border-radius: var(--border-radius-regular);
    transition: ease-out 150ms;
}

/* ================================= */
/*             HOTKEY
/* ================================= */

.hotkey {
    background-color: rgba(255,255,255, 0);
    color: var(--neutral-lightest);
    width: 32px;
    height: 32px;
    border: 1px solid var(--neutral-default);
    border-radius: var(--border-radius-small);
    font-size: var(--text-body);
    font-weight: var(--primary-font-bold);
}