// --------------------------------------------------
// VARIABLES
// --------------------------------------------------

:root {

    // Fonts

    --text-font-family: 'Karla', sans-serif;
    --title-font-family: 'Cairo', sans-serif;
    --extra-light-font-weight: 200;
    --light-font-weight: 300;
    --regular-font-weight: 400;
    --medium-font-weight: 500;
    --semi-bold-font-weight: 600;
    --bold-font-weight: 700;
    --extra-bold-font-weight: 800;
    --black-font-weight: 900;
    --h1-font-size: 2rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.8rem;
    --button-font-size: 1.4rem;
    --text-font-size: 1.2rem;
    --caption-font-size: 1.1rem;
    --footnote-font-size: 1rem;
    --line-height: 1.2;
    --h1-font-height: calc(var(--h1-font-size) * var(--line-height));
    --h2-font-height: calc(var(--h2-font-size) * var(--line-height));
    --h3-font-height: calc(var(--h3-font-size) * var(--line-height));
    --button-font-height: calc(var(--button-font-size) * var(--line-height));
    --text-font-height: calc(var(--text-font-size) * var(--line-height));
    --caption-font-height: calc(var(--caption-font-size) * var(--line-height));
    --footnote-font-height: calc(var(--footnote-font-size) * var(--line-height));


    // Dimensions

    --regular-content-max-width: Min(100%, 80rem);
    --small-content-max-width: Min(100%, 60rem);
    --regular-icon-size: 2rem;
    --small-icon-size: calc(var(--text-font-size) * var(--line-height));
    --button-gap: 0.5rem;


    // Colors

    --eerie-black: #212121;
    --sonic-silver: #7a7a7a;
    --silver: #C2C2C2;
    --emerald: #72C080;
    --granny-smith-apple: #A3F3B0;
    --middle-green: #428F53;
    --rajah: #F9B262;

    --primary-color: var(--eerie-black);
    --primary-color-light: var(--sonic-silver);
    --primary-color-dark: black;
    --secondary-color: white;
    --secondary-color-dark: var(--silver);
    --accent-color: var(--emerald);
    --accent-color-light: var(--granny-smith-apple);
    --accent-color-dark: var(--middle-green);
    --button-gradient: linear-gradient(
        45deg,
        hsl(131deg 38% 60%) 1%,
        hsl(131deg 40% 62%) 34%,
        hsl(130deg 43% 64%) 46%,
        hsl(130deg 46% 66%) 54%,
        hsl(130deg 49% 69%) 60%,
        hsl(130deg 53% 71%) 66%,
        hsl(130deg 58% 73%) 71%,
        hsl(130deg 63% 75%) 76%,
        hsl(130deg 69% 77%) 83%,
        hsl(130deg 77% 80%) 100%
    );
    --error-color: var(--rajah);
}

// Media queries

$tablet-media-query: 48rem; // 768px
$desktop-media-query: 62rem; // 992px

// --------------------------------------------------
// FONTS AND COLORS
// --------------------------------------------------

body {
    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
    font-weight: var(--regular-font-weight);
    line-height: var(--line-height);
    color: var(--secondary-color);
    background-color: var(--primary-color);
}

h1 {
    font-family: var(--title-font-family);
    font-size: var(--h1-font-size);
    font-weight: var(--medium-font-weight);
}

h2 {
    font-family: var(--title-font-family);
    font-size: var(--h2-font-size);
}

h3 {
    font-family: var(--text-font-family);
    font-size: var(--h3-font-size);
}

p {
    font-weight: var(--light-font-weight);
}

strong {
    font-weight: var(--bold-font-weight);
}

em {
    font-style: italic;
}

// --------------------------------------------------
// LINK STYLE
// --------------------------------------------------

a {
    color: var(--secondary-color);
    text-decoration: underline var(--accent-color);
    border-radius: 2px;
    transition: color 200ms ease-in-out;

    &:hover,
    &:focus,
    &:active {
        color: var(--accent-color);
    }

    &:focus-visible {
        outline: 1px dashed var(--accent-color);
        outline-offset: 2px;
        animation: expand-outline 200ms ease-in-out;
    }
}

// --------------------------------------------------
// BUTTON STYLE
// --------------------------------------------------

button {
    padding: 1rem 1.5rem;
    color: var(--primary-color);
    background-image: var(--button-gradient);
    background-size: 100%;
    background-position: right center;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-family: var(--title-font-family);
    font-size: var(--text-font-size);
    font-weight: var(--semi-bold-font-weight);
    line-height: var(--line-height);
    text-align: center;
    transition: background-size 200ms ease-in-out;

    &:hover,
    &:focus,
    &:active {
        background-size: 300%;
    }

    &:focus-visible {
        outline: 1px dashed var(--accent-color);
        outline-offset: 4px;
        animation: expand-outline 200ms ease-in-out;
    }
}

@mixin button-with-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    &__text,
    &-text {
        transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
        transition: transform 200ms ease-in-out;
    }

    &__icon,
    &-icon {
        display: inherit;
        flex-shrink: 0;
        opacity: 0;
        width: var(--small-icon-size);
        height: var(--small-icon-size);
        margin: 0 0 0 var(--button-gap);
        transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
        transition:
            opacity 200ms ease-in-out,
            transform 200ms ease-in-out; 
    }

    &:hover &__text,
    &:hover &-text,
    &:focus &__text,
    &:focus &-text,
    &:active &__text,
    &:active &-text {
        transform: translateX(0);
    }

    &:hover &__icon,
    &:hover &-icon,
    &:focus &__icon,
    &:focus &-icon,
    &:active &__icon,
    &:active &-icon {
        opacity: 1;
        transform: translateX(0);
    }
}

// --------------------------------------------------
// FORM STYLE
// --------------------------------------------------

form {

    div {
        position: relative;
        
        label {
            position: absolute;
            top: calc(-1 * (var(--text-font-size) / 2));
            left: 1rem;
            display: inline-block;
            padding: 0 0.5rem;
            font-family: var(--title-font-family);
            background-color: var(--primary-color);
        }

        input,
        textarea {
            font-family: var(--text-font-family);
            font-size: var(--text-font-size);
            font-weight: var(--light-font-weight);
            line-height: var(--line-height);
            width: 100%;
            padding: 1rem;
            color: var(--secondary-color);
            background-color: var(--primary-color);
            border: 1px solid var( --primary-color-light);
            border-radius: 10px;
            transition: border 200ms ease-in-out;

            &:hover,
            &:focus,
            &:active {
                border: 1px solid var(--accent-color);
                outline: none;
            }
        }

        textarea {
            resize: vertical;
            min-height: 15rem;
        }

        p {
            font-size: var(--caption-font-size);
            color: var(--accent-color);
        }
    }
}

// --------------------------------------------------
// SMOOTH SCROLLING
// --------------------------------------------------

html {
    scroll-behavior: smooth;
}