/**
 * Fit Football — Design Tokens v0.1.0
 * Single source of truth for the brand. Every redesigned section styles
 * itself with these variables only — no more per-section fonts or colors.
 *
 * Type system: Anton (display) + Inter (body). Nothing else, ever.
 */

:root {
	/* ---- Type ---- */
	--ff-font-display: 'Anton', 'Arial Narrow', 'Impact', sans-serif;
	--ff-font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--ff-text-xs: 0.75rem;   /* 12px  meta, badges            */
	--ff-text-sm: 0.875rem;  /* 14px  secondary text          */
	--ff-text-md: 1rem;      /* 16px  body                    */
	--ff-text-lg: 1.25rem;   /* 20px  lead, card titles       */
	--ff-text-xl: 2rem;      /* 32px  section headings        */
	--ff-text-2xl: 3rem;     /* 48px  page/hero headings      */
	--ff-text-3xl: 4.5rem;   /* 72px  hero display            */

	/* ---- Color ---- */
	--ff-ink: #0b0f14;          /* near-black — headings, footer bg   */
	--ff-ink-soft: #3f4854;     /* body text                          */
	--ff-ink-mute: #77808c;     /* captions, placeholders             */
	--ff-paper: #ffffff;        /* page background                    */
	--ff-paper-soft: #f4f6f8;   /* alternate section background       */
	--ff-line: #e4e8ec;         /* borders, dividers                  */

	--ff-brand: #0ea45e;        /* pitch green — CTAs, success, gifts */
	--ff-brand-ink: #0a7a46;    /* hover / pressed                    */
	--ff-sale: #e11d48;         /* sale badges, urgency               */
	--ff-star: #f5a623;         /* review stars                       */

	/* ---- Space (4px scale) ---- */
	--ff-sp-1: 0.25rem;
	--ff-sp-2: 0.5rem;
	--ff-sp-3: 0.75rem;
	--ff-sp-4: 1rem;
	--ff-sp-6: 1.5rem;
	--ff-sp-8: 2rem;
	--ff-sp-12: 3rem;
	--ff-sp-16: 4rem;

	/* ---- Shape ---- */
	--ff-radius-sm: 6px;
	--ff-radius-md: 10px;
	--ff-radius-lg: 16px;
	--ff-radius-pill: 999px;
	--ff-shadow-card: 0 1px 3px rgba(11, 15, 20, 0.08), 0 4px 14px rgba(11, 15, 20, 0.06);
	--ff-shadow-pop: 0 8px 30px rgba(11, 15, 20, 0.16);

	/* ---- Layout ---- */
	--ff-container: 1140px; /* matches Botiga content width */
}

/* Botiga's own Customizer output (wp-content/uploads/botiga/custom-styles.css,
   theme-generated, always loads sitewide) sets a plain `body{font-family:
   Poppins,...}` with no !important. Every one of our redesigned sections
   already overrides its own font-family, but anything NOT yet touched
   (native WooCommerce/plugin markup, form labels, etc.) still inherits
   Poppins from body — which makes the browser actually fetch the legacy
   Poppins/Roboto Condensed/Squada One font files for real, on every page,
   even though nothing in the finished design is meant to show them. Fix at
   the root instead of chasing every leaf selector. */
body {
	font-family: var(--ff-font-body) !important;
}