/* variables */

:root {
    /* Colors */

    /* Primary */

    --navy-850: hsl(217, 28%, 15%);
    --navy-900: hsl(218, 28%, 13%);
    --navy-950: hsl(216, 53%, 9%);
    --navy-800: hsl(219, 30%, 18%);

    /* Accent */

    --teal-200: hsl(176, 68%, 64%);
    --cyan-500: hsl(198, 60%, 50%);
    --red-500: hsl(0, 100%, 63%);

    /* Neutral */

    --white: hsl(0, 0%, 100%);
    --creamy-white: hsl(0, 61%, 92%);

    /* gradients */

    --cta-gradient: linear-gradient(45deg, var(--teal-200), var(--cyan-500));

    /* Typography */
    --font-family-text: 'Open Sans', sans-serif;
    --font-family-heads: 'Raleway', sans-serif;
    --font-size-base: 0.875rem;
    /* sensible base for body text */

    /* semantic font-size scale */

    --fs-xxs: 0.7rem;
    --fs-xs: 0.85rem;
    --fs-sm: 1rem;
    --fs-md: 1.3rem;
    --fs-lg: 1.5rem;
    --fs-lg1: 1.7rem;
    --fs-lg2: 2rem;
    --fs-xl: 2.7rem;
    --fs-xxl: 3rem;
    --fs-3xl: 3.5rem;

    /* Font weight */
    --fw-bold: 700;
    --fw-light: 400;

    /* Spacing scale (rem-based for consistency)
       Use a 8px baseline: 0.5rem (~8px), 1rem (~16px), 2rem (~32px) */
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-half: 30px;
}

/* CSS reset */

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

/* main styles */

body {
    font-size: var(--font-size-base);
    font-family: var(--font-family-text);
    background-color: var(--navy-950);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--white);
}

h1,
h2,
.cta-button,
.navigation-list {
    font-family: var(--font-family-heads) !important;
}