:root {
    /* Base */
    --white: #fff;
    --black: #000;

    /* TC colors */
    --iceland-1000: #0d0d0c;
    --iceland-800: #524f48;
    --iceland-300: #f3ede2;
    --icelend-200: #f9f6f0;
    --iceland-100: #fbf9f6;
    --cherry-1100: #470C28;
    --cherry-1000: #530e2f;
    --cherry-900: #5D1231;
    --cherry-800: #711a36;
    --cherry-700: #86233a;
    --cherry-100: #ffd7d4;
    --cherry-bright: #ff5a58;
    --amazon-1000: #013f38;
    --amazon-800: #245547;
    --amazon-100: #c8f2e0;
    --amazon-bright: #21e9a0;
    --azure-100: #b0e2f5;
    --azure-bright: #80f4fc;
    --coral: #ff5a58;

    /* Theme color */
    --theme: #1D1C1A;
    --theme-rgb: 29, 28, 26;
    --theme-darker: #121110;
    --theme-contrast: #FBF9F6;

    --theme-alt: #530E2F;
    --theme-alt-darker: #31091C;
    --theme-alt-contrast: #fff;

    --heading-dark: #524f48;
    --text-dark: #1D1C1A;
    --background-dark: #1D1C1A;
    --background-dark-lighter: #23221F;
    --border-dark: rgba(0, 0, 0, 0.08);

    /* Light color */
    --heading-light: #FBF9F6;
    --text-light: #FBF9F6;
    --background-light: #FBF9F6;
    --border-light: rgba(255, 255, 255, 0.1);

    /* Header */
    --selected-nav-item: #530E2F;
    --header-height: 80px;
    --logo-padding: 20px;
    --navigation-padding: 16px;
    --pre-top-height: 30px;
    --top-combo-calc: calc(var(--header-height) + var(--pre-top-height));

    /* Grid */
    --grid-width-small: 850px;
    --grid-width: 1300px;
    --grid-width-big: 1600px;
    --grid-gutter: 30px;
    --grid-gutter-half: calc(var(--grid-gutter) / 2);

    /* Buttons */
    --button-border-radius: 100px;

    /* Typography */
    --body-font: Plus Jakarta Sans;
    --heading-font: "quincy-cf";
    --font-size: 16px;
    --font-size-big: 32px;
    --font-size-small: 10px;
    --font-weight-normal: normal;
    --font-weight-light: 300;
    --font-weight-semibold: 600;
    --font-weight-bold: bold;
    --font-weight-bolder: bolder;

    /* Validation */
    --success: #2ecc71;
    --error: #e74c3c;
}
@media only screen and (max-width: 1200px) {
    :root {
        --navigation-padding: 16px;
    }
}
@media only screen and (max-width: 992px) {
    :root {
        --header-height: 50px;
        --grid-gutter: 20px;
        --logo-padding: 8px;
    }
}
@media only screen and (max-width: 768px) {
    :root {
        --grid-gutter: 15px;
    }
}
@media only screen and (max-width: 480px) {
    :root {
        --grid-gutter: 15px;
    }
}