/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
    padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
    list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
    max-width: 100%;
    display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
    margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

button {
    all: unset;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:root {
    --ff: "DM Sans";
    --ff-roboto: "Roboto";

    /* Primary Colors (HSL) */
    --blue-50: hsl(210, 100%, 99%);
    --blue-500: hsl(209, 100%, 36%);
    --blue-600: hsl(209, 100%, 33%);
    --blue-700: hsl(216, 62%, 32%);

    /* Grayscale (HSL) */
    --white: hsl(0, 0%, 100%);
    --gray-25: hsl(240, 20%, 99%);
    --gray-500: hsl(60, 7%, 87%);
    --gray-600: hsl(0, 0%, 58%);
    --gray-700: hsl(240, 1%, 28%);
    --gray-800: hsl(330, 2%, 16%);
    --gray-900: hsl(330, 2%, 16%);
    --black: hsl(0, 0%, 0%);

    /* Pricing (HSL) */
    --green-light: hsl(108, 62%, 52%);
    --green-dark: hsl(108, 56%, 41%);
    --blue-light: hsl(205, 99%, 65%);
    --blue-dark: hsl(202, 94%, 46%);
    --silver-light: hsl(208, 15%, 75%);
    --silver-dark: hsl(213, 5%, 53%);
    --gold-light: hsl(46, 94%, 50%);
    --gold-dark: hsl(46, 93%, 37%);
    --office-60: hsl(120, 93%, 23%);
    --office-120: hsl(240, 100%, 30%);
    --office-60-toll-free: hsl(348, 100%, 32%);
    --office-120-toll-free: hsl(300, 100%, 25%);

    /* Error/Success (HSL) */
    --red-25: hsl(0, 100%, 100%);
    --red-500: hsl(0, 96%, 49%);
    --green-25: hsl(120, 100%, 98%);
    --green-500: hsl(130, 100%, 40%);

    /* Typography */
    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* Separate Font Sizes and Line Heights */
    /* Display Sizes */
    --fs-display-2xl: 3.75rem;
    --lh-display-2xl: 4.5rem;
    --fs-display-xl: 3rem;
    --lh-display-xl: 3.75rem;
    --fs-display-l: 2.25rem;
    --lh-display-l: 2.75rem;
    --fs-display-m: 1.875rem;
    --lh-display-m: 2.375rem;
    --fs-display-s: 1.5rem;
    --lh-display-s: 2rem;

    /* Text Sizes */
    --fs-text-xl: 1.125rem;
    --lh-text-xl: 1.75rem;
    --fs-text-l: 1rem;
    --lh-text-l: 1.5rem;
    --fs-text-m: 0.875rem;
    --lh-text-m: 1.25rem;
    --fs-text-s: 0.75rem;
    --lh-text-s: 1.125rem;

    /* Font Size and Line Height Combined */
    --display-2xl: 3.75rem / 4.5rem;
    --display-xl: 3rem / 3.75rem;
    --display-l: 2.25rem / 2.75rem;
    --display-m: 1.875rem / 2.375rem;
    --display-s: 1.5rem / 2rem;

    --text-xl: 1.125rem / 1.75rem;
    --text-l: 1rem / 1.5rem;
    --text-m: 0.875rem / 1.25rem;
    --text-s: 0.75rem / 1.125rem;

    --site-max-width: 1190px;

    --gap-xs: 8px;
    --gap-s: 16px;
    --gap-m: 24px;
    --gap-l: 32px;
    --gap-xl: 40px;
    --gap-2xl: 48px;
    --gap-3xl: 56px;
    --gap-4xl: 64px;
    --gap-5xl: 72px;

    --animation-timing: 200ms ease-in-out;
}