/* ============================================
   TOKENS
   ============================================ */

:root {

    /* --- Primitive colour tokens --- */
    --color-orange-500: #ff6a3e;
    --color-blue-400: #0077c8;
    --color-purple-400: #cb6be5;
    --color-yellow-400: #ffba43;
    --color-grey-900: #1a1a1a;
    --color-grey-700: #4e4b66;
    --color-grey-50: #fafbfc;

    /* --- Typography --- */
    --font-body: "Source Sans 3", Helvetica, Arial, sans-serif;
    --font-heading: "Playfair Display", Georgia, serif;

    /* --- Font size scale --- */
    --font-size-sm:  clamp(0.75rem, 1.5vw, 0.875rem);
    --font-size-md:  clamp(1rem, 1.2vw, 1.125rem);
    --font-size-lg:  clamp(1.125rem, 1.8vw, 1.333rem);
    --font-size-xl:  clamp(1.333rem, 2.5vw, 1.777rem);
    --font-size-2xl: clamp(1.777rem, 3.5vw, 2.369rem);
    --font-size-3xl: clamp(2.369rem, 5vw, 3.157rem);

    /* --- Line height scale --- */
    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.75;
    --leading-title:   var(--leading-tight);

    /* --- Font weight scale --- */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* --- Space scale --- */
    --space-3xs: clamp(0.25rem, 0.5vw, 0.25rem);
    --space-2xs: clamp(0.4375rem, 1vw, 0.5rem);
    --space-xs:  clamp(0.6875rem, 1.5vw, 0.75rem);
    --space-sm:  clamp(0.875rem, 2vw, 1rem);
    --space-md:  clamp(1.3125rem, 3vw, 1.5rem);
    --space-lg:  clamp(1.75rem, 4vw, 2rem);
    --space-xl:  clamp(2.625rem, 5vw, 3rem);
    --space-2xl: clamp(3.5rem, 6vw, 4rem);
    --space-3xl: clamp(5.25rem, 8vw, 6rem);

    /* --- Semantic colour tokens --- */
    --color-primary: var(--color-blue-400);
    --color-secondary: var(--color-yellow-400);
    --color-dark: var(--color-grey-900);
    --color-mid: var(--color-grey-700);
    --color-light: var(--color-grey-50);
    --color-white: #ffffff;

}

/* ============================================
   RESET
   ============================================ */

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

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

address,
blockquote,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
ol,
p,
pre,
table,
ul {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--leading-normal);
    color: var(--color-dark);
}

img,
picture {
    height: auto;
    max-width: 100%;
    display: block;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    :after,
    :before {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   BASE STYLES
   ============================================ */

h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    line-height: var(--leading-title);
}

.topper {
    font-size: var(--font-size-sm);
    line-height: var(--leading-title);
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: var(--font-weight-bold);
    display: block;
}