/* ============================================================================
   Canada World Club — design tokens.
   Colours are measured from the client logo (pixel sampling): gradient red (#FA0D1C highlight -> #7C0101 shadow)
   and deep navy #032F64. Latin: Montserrat (self-hosted variable font). The site is English-only.
   Contrast (WCAG): white on --red 6.4:1, white on --red-deep 9.4:1, --navy on white 13:1, --muted on white 5.5:1.
   Never put --red text on a navy background (2:1) - use white; red is for fills and icons there.
   ========================================================================== */

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-latin-wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* brand (from the logo) */
    --red: #E2010B;          /* main CTA fill, active states (white text 6.4:1) */
    --red-bright: #FA0D1C;   /* gradient start, icons, large text (NOT small text: 4.1:1 on white) */
    --red-deep: #920102;     /* hover / pressed, gradient end, red TEXT on tinted backgrounds (white 9.4:1) */
    --maroon: #7C0101;       /* deepest shade - hero art, shadows */
    --navy: #032F64;         /* "WORLD CLUB" - headings, nav, secondary buttons (white 13:1) */
    --navy-900: #021F41;     /* deep base: footer, hero art (derived) */
    --navy-600: #0B4287;     /* navy hover, focus ring (derived) */

    --paper: #F6F8FC;        /* page background - never pure white (cards may be white) */
    --mist: #E8EEF7;         /* navy 8% tint - alternate section background */
    --mist-50: #F1F5FB;      /* lighter tint - soft backgrounds, hover rows */
    --red-soft: #FDECEC;     /* badge / alert background */

    --ink: #0F1E33;          /* body text */
    --ink-soft: #3D4B5F;
    --muted: #5A6A7E;
    --line: #DDE4EE;
    --line-strong: #C5D0DE;
    --danger: #B42318;       /* always paired with an icon + text, never colour alone (brand red is close) */
    --success: #1F8A5B;

    /* gradients - the logo's CANADA letters shade from bright red (top) to deep maroon (bottom) */
    --grad-brand: linear-gradient(160deg, var(--red-bright) 0%, var(--red) 40%, var(--red-deep) 100%);
    --grad-navy: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);

    /* radius language: cards 16, panels 20, controls 10 (no pill buttons among square cards) */
    --radius-card: 16px;
    --radius-panel: 20px;
    --radius-sm: 10px;

    /* shadows only for things that float */
    --shadow-float: 0 12px 32px rgba(2, 31, 65, .16);
    --shadow-pop: 0 18px 48px rgba(2, 31, 65, .22);

    /* type */
    --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ls-eyebrow: .12em;
    --lh-body: 1.6;

    /* motion */
    --ease-out: cubic-bezier(.22, .8, .3, 1);

    /* roles: primary = navy (links, nav, secondary buttons), accent = red (the CTA) */
    --primary: var(--navy);
    --primary-dark: var(--navy-900);
    --primary-soft: var(--mist-50);
    --accent: var(--red);
    --accent-dark: var(--red-deep);
    --accent-soft: var(--red-soft);
    --dark: var(--navy-900);
    --dark-2: var(--navy);
    --page: var(--paper);
    --card: #FFFFFF;
    --radius: var(--radius-card);
    --shadow-sm: none;
    --shadow: var(--shadow-float);
    --shadow-lg: var(--shadow-pop);

    /* names inherited from the ported stylesheets (site.css / views still read them) mapped onto the new palette */
    --ocean: var(--navy);                 /* links + hover colour */
    --sky: var(--navy-600);               /* focus ring, hover borders, gradient stops */
    --cyan: #C9D8EE;                      /* light tint for text on navy (breadcrumb active) */
    --gold: var(--red-bright);
    --orange: var(--red);
    --orange-deep: var(--red-deep);
    --orange-ink: var(--red-deep);        /* accent TEXT on light backgrounds */
    --grad-aurora: var(--grad-navy);
    --grad-spark: var(--grad-brand);
}