/*
 * Biddlesport design tokens
 * Source: Figma "Website Design", Primitives + Tokens collections and text styles.
 * Values marked (page override) are used in the final frames but are not yet Figma variables.
 */

/* ----------------------------------------------------------
   Fonts
   Licensed fonts: drop the .woff2 files into /assets/fonts/
   with these exact names. Fallbacks are used until then.
   ---------------------------------------------------------- */
@font-face {
    font-family: "Brockmann";
    src: url("../fonts/brockmann-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Brockmann";
    src: url("../fonts/brockmann-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("../fonts/proxima-nova-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("../fonts/proxima-nova-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Primitives: Colour */
    --colour-slate: #424e5a;        /* Figma: Colour/Blue */
    --colour-bronze: #d8ba93;
    --colour-silver: #828c99;
    --colour-orange: #e06253;       /* Figma: Colour/Gold */
    --colour-mint: #cdeed3;
    --colour-petrol: #011618;
    --colour-moss: #1c3230;
    --colour-white: #ffffff;
    --colour-black: #000000;

    /* Page overrides (not yet variables in Figma) */
    --colour-olive: #8f9779;        /* CTA panels, rules, Register button */
    --colour-ink: #0b1215;          /* dark buttons, footer component */
    --colour-deep: #0e2221;         /* testimonial cards */
    --colour-rule-light: #d3d3d3;   /* FAQ dividers */

    /* Semantic */
    --bg-page: var(--colour-moss);
    --text-on-dark: var(--colour-white);
    --text-on-light: var(--colour-black);
    --rule-on-dark: var(--colour-slate);
    --accent-rule: var(--colour-olive);

    /* Typography */
    --font-heading: "Brockmann", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;

    /* Text styles: size / line-height (fluid from 375px to 1440px) */
    --h1-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);        /* 72 */
    --h1-lh: 0.89;                                          /* 64/72 */
    --h2-size: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);     /* 40 */
    --h2-lh: 1;
    --h2-ls: -0.04em;
    --h3-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);    /* 24 */
    --h3-lh: 1.333;                                         /* 32 */
    --body-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);  /* 20 */
    --body-lh: 1.4;                                         /* 28 */
    --small-size: 1rem;                                     /* 16 */
    --small-lh: 1.5;                                        /* 24 */
    --eyebrow-size: 1rem;                                   /* 16 */
    --eyebrow-lh: 1.125;                                    /* 18 */

    /* Spacing */
    --space-2xs: 0.375rem;   /* 6 */
    --space-xs: 0.625rem;    /* 10 */
    --space-sm: 1.25rem;     /* 20 */
    --space-md: 1.875rem;    /* 30 */
    --space-lg: 2.5rem;      /* 40 */
    --space-xl: 3.75rem;     /* 60 */
    --space-2xl: clamp(3.75rem, 2rem + 5vw, 6.25rem);   /* 100 */
    --section-gap: clamp(5rem, 3rem + 7vw, 10rem);      /* 160 */
    --page-end: clamp(6rem, 4rem + 7vw, 12.5rem);       /* 200 */

    /* Layout */
    --container: 1200px;
    --container-text: 792px;
    --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
    --header-top: 40px;
    --header-main: 76px;

    /* Shape */
    --radius-card: 10px;
    --radius-image: 12px;
    --radius-pill: 999px;

    /* Effects */
    --shadow-panel: 4px 4px 20px rgba(0, 0, 0, 0.55);
    --transition: 200ms ease;
}