:root {
    /* ─── Colors ─────────────────────────────────── */

    /* Cyan */
    --color-cyan-600: hsl(192, 37%, 48%);
    --color-cyan-300: hsl(192, 90%, 77%);

    /* Purple */
    --color-purple-600: hsl(268, 34%, 53%);
    --color-purple-300: hsl(268, 100%, 86%);

    /* Slate */
    --color-slate-900: hsl(240, 21%, 20%);
    --color-slate-600: hsl(240, 10%, 57%);
    --color-slate-300: hsl(240, 18%, 85%);

    /* White */
    --color-white: hsl(0, 0%, 98%);

    /* ─── Typography ─────────────────────────────── */
    --font-body: 'Red Hat Display', sans-serif;

    /* Font weights */
    --font-weight-medium: 500;
    --font-weight-black:  900;

    /* ─── Spacing ─────────────────────────────────── */
    --space-50:   0.25rem;  /*   4px */
    --space-100:  0.5rem;   /*   8px */
    --space-200:  1rem;     /*  16px */
    --space-300:  1.5rem;   /*  24px */
    --space-400:  2rem;     /*  32px */
    --space-500:  2.5rem;   /*  40px */
    --space-600:  3rem;     /*  48px */
    --space-700:  3.5rem;   /*  56px */
    --space-800:  4rem;     /*  64px */
    --space-900:  4.5rem;   /*  72px */
    --space-1000: 5rem;     /*  80px */
    --space-1400: 7rem;     /* 112px */

    /* ─── Border radius ──────────────────────────── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   24px;
    --radius-full: 50%;
}

/* ─── Text Presets ───────────────────────────────── */

/* text-preset-1 — Red Hat Display Black, 64px, 110% line-height, 0px ls */
.text-preset-1 {
    font-family: var(--font-body);
    font-size: 2.5rem;
    font-weight: var(--font-weight-black);
    line-height: 1.1;
    letter-spacing: 0;
}

/* text-preset-2 — Red Hat Display Black, 40px, 110% line-height, 0px ls */
.text-preset-2 {
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: var(--font-weight-black);
    line-height: 1.1;
    letter-spacing: 0;
}

/* text-preset-3 — Red Hat Display Black, 16px, 110% line-height, 4px ls */
.text-preset-3 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: var(--font-weight-black);
    line-height: 1.1;
    letter-spacing: 4px;
}

/* text-preset-4 — Red Hat Display Medium, 18px, 150% line-height, 0px ls */
.text-preset-4 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    letter-spacing: 0;
}

/* text-preset-5 — Red Hat Display Black, 18px, 150% line-height, 0px ls */
.text-preset-5 {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: var(--font-weight-black);
    line-height: 1.5;
    letter-spacing: 0;
}

html {
    font-size: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.attribution {
    text-align: center;
    margin: var(--space-400) 0;
    color: var(--color-slate-600);
}

.attribution a {
    color: var(--color-slate-900);
}

.attribution a:focus-visible {
    outline: 2px solid var(--color-slate-900);
}

/* breakpoints tablet */
@media (min-width: 768px) {
    .text-preset-1 {
        font-size: 3rem;
    }

    .text-preset-2 {
        font-size: 2.25rem;
    }

    .text-preset-3 {
        font-size: 0.875rem;
    }

    .text-preset-4 {
        font-size: 1rem;
    }
}

/* breakpoints desktop */
@media (min-width: 1440px) {
    .text-preset-1 {
        font-size: 4rem;
    }

    .text-preset-2 {
        font-size: 2.5rem;
    }

    .text-preset-3 {
        font-size: 1rem;
    }
}