/* ── Fonts ── */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
         url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
         url('../fonts/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
         url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
         url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Global Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family);
}

/* ── Design Tokens ── */
:root {
    /* ─── Colors: Primary ─── */
    --color-primary:          hsla(232, 43%, 41%, 1);
    --color-primary-hover:    hsla(233, 53%, 26%, 1);

    /* ─── Colors: Secondary ─── */
    --color-secondary:        hsla(0, 78%, 51%, 1);
    --color-secondary-hover:  hsla(0, 77%, 37%, 1);
    --color-secondary-dark:   hsla(0, 83%, 33%, 1);

    /* ─── Colors: Text ─── */
    --color-text-heading:     hsla(228, 68%, 12%, 1);
    --color-text-body:        hsla(231, 14%, 39%, 1);

    /* ─── Colors: Background ─── */
    --color-bg-dark:          hsla(228, 68%, 12%, 1);
    --color-bg-light:         hsla(234, 29%, 94%, 1);
    --color-bg-white:         hsla(0, 0%, 100%, 1);

    /* ─── Colors: Misc ─── */
    --color-white:            hsla(0, 0%, 100%, 1);
    --color-green:            hsla(142, 71%, 45%, 1);

    /* ─── Colors: Semantic Aliases ─── */
    --color-navy:             var(--color-primary);
    --color-navy-dark:        var(--color-bg-dark);
    --color-red:              var(--color-secondary);
    --color-red-hover:        var(--color-secondary-hover);
    --color-red-dark:         var(--color-secondary-dark);

    /* ─── Typography ─── */
    --font-family:            'Poppins', sans-serif;

    /* Font sizes */
    --font-size-eyebrow:      0.75rem;
    --font-size-xs:           0.75rem;
    --font-size-sm:           0.875rem;
    --font-size-base:         1rem;
    --font-size-body:         1rem;
    --font-size-h4:           1.25rem;
    --font-size-lg:           1.5rem;
    --font-size-h3:           1.5rem;
    --font-size-h2:           2.5rem;
    --font-size-h1:           3.5rem;

    /* Font weights */
    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;

    /* Line heights */
    --line-height-tight:      1.2;
    --line-height-normal:     1.4;
    --line-height-relaxed:    1.6;

    /* Letter spacing */
    --letter-spacing-eyebrow: 0.15rem;

    /* ─── Spacing ─── */
    --spacing-sm:             1rem;
    --spacing-md:             1.5rem;
    --spacing-lg:             2.5rem;

    /* ─── Grid ─── */
    --grid-columns:           12;
    --grid-gutter:            1.5rem;
    --container-margin:       0rem;
    --container-max-width:    83.75rem;

    /* ─── Border Radius ─── */
    --radius-sm:              0.25rem;
    --radius-md:              0.625rem;
    --radius-lg:              0.9375rem;
    --radius-full:            6.25rem;

    /* ─── Buttons ─── */
    --btn-padding-x:          2rem;
    --btn-padding-y:          0.75rem;
    --btn-font-size:          1rem;
    --btn-radius:             0.625rem;
    --btn-border-width:       0.1875rem;

    /* ─── Arrow Buttons ─── */
    --arrow-size:             3.1875rem;
    --arrow-icon-size:        0.9375rem;
}