/* ==========================================================================
   Design tokens — Halifax Imperial Wheelers
   Single source of truth for colour, type, spacing, radii, etc.
   Values sampled directly from the supplied design artwork.
   ========================================================================== */

/* ---- Self-hosted fonts (no Google CDN call) ----------------------------- */

@font-face {
  font-family: "Abril Fatface";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/abril-fatface-400.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/figtree-300.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/figtree-500.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/figtree-600.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/figtree-700.woff2") format("woff2");
}

:root {
  /* ---- Colour ----------------------------------------------------------
     NOTE: the dominant page surface is a near-imperceptible off-white
     (#f8f8f8), NOT pure white. Pure white is reserved for cards that sit
     ON a band. Never leave a large area as default #fff. */
  --c-navy:      #27367b;   /* headings, buttons, links, active states      */
  --c-ink:       #3b4374;   /* secondary navy: chevrons, emphasis           */
  --c-gold:      #f9d006;   /* logo / kit accent — use sparingly            */
  --c-band:      #f8f8f8;   /* full-bleed hero & section bands (default bg)  */
  --c-surface:   #f4f4f4;   /* cards / panels (a touch darker than band)    */
  --c-lavender:  #f5f3fe;   /* "Latest from Instagram" carousel band        */
  --c-hairline:  #e7e7e7;   /* table dividers / borders                     */
  --c-white:     #ffffff;   /* reserved — sparingly, not the default bg     */

  --c-text:      #2b2b33;   /* default body ink                             */
  --c-muted:     #6b6b73;   /* muted secondary copy                         */
  --c-faint:     #8a8a92;   /* small caps labels, captions                  */

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Abril Fatface", Georgia, "Times New Roman", serif;
  --font-body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  --w-light:   300;   /* body copy                                          */
  --w-medium:  500;   /* nav, sub-labels                                    */
  --w-semibold:600;   /* buttons, emphasised labels                         */
  --w-bold:    700;   /* strong inline emphasis                             */

  /* Fluid-ish type scale (rem, relative to an 18px root — see styles.css).
     Display sizes use Abril; card titles, labels and body use Figtree. */
  --fs-display:   clamp(2.75rem, 1.6rem + 4.2vw, 4.6rem); /* hero H1        */
  --fs-h2:        clamp(1.85rem, 1.3rem + 1.6vw, 2.5rem); /* section serif  */
  --fs-h3:        1.65rem;                                /* card titles     */
  --fs-lead:      1.35rem;                                /* hero subtext    */
  --fs-body:      1rem;
  --fs-small:     0.95rem;
  --fs-label:     0.8rem;                                 /* AUDAX small caps*/
  --fs-faq:       1.3rem;                                 /* FAQ questions   */

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-body:   1.6;

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.5rem;    /* 24px */
  --sp-6:  2rem;      /* 32px */
  --sp-7:  3rem;      /* 48px */
  --sp-8:  4rem;      /* 64px */
  --sp-9:  6rem;      /* 96px */

  /* ---- Radii ----------------------------------------------------------- */
  --r-sm:   8px;    /* buttons, inputs            */
  --r-md:   14px;   /* cards, panels              */
  --r-lg:   20px;   /* large image blocks         */
  --r-pill: 999px;  /* tabs, pills                */

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1280px;
  --gutter:    var(--sp-5);

  /* ---- Effects --------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(39, 54, 123, 0.04),
                 0 8px 24px rgba(39, 54, 123, 0.06);
  --ring: 0 0 0 3px rgba(39, 54, 123, 0.35); /* focus-visible              */

  --transition: 150ms ease;
}