/**
 * Spice Awards — design tokens.
 *
 * Single source of truth for colour, type, spacing and radii. Extracted from
 * the Figma pages, with one deliberate override: the page and hero banners are
 * BLACK here rather than the red/gold swirl artwork, per the brief. The ticket
 * CTA band and the award accordion art tile use the supplied gold.jpg and
 * red.jpg. Flip --spice-banner-bg to put artwork back on the page banners.
 */

:root {
	/* --- Brand ------------------------------------------------------- */
	--spice-black:        #000000;
	--spice-black-soft:   #111111;   /* banner inner gradient stop */
	--spice-gold:         #C89B3C;   /* sampled from the logo mark */
	--spice-gold-light:   #E7C46B;
	--spice-gold-dark:    #A87F28;
	--spice-red:          #B32017;   /* heading underline accent */

	--spice-ink:          #16202B;   /* headings */
	--spice-ink-soft:     #1D2530;
	--spice-body:         #6B7280;   /* body copy */
	--spice-muted:        #9AA1AC;

	--spice-white:        #FFFFFF;
	--spice-cream:        #FAF7F0;   /* card gradient start */
	--spice-cream-deep:   #F3ECDD;   /* card gradient end */
	--spice-line:         #E7E2D6;

	/* --- Banner surfaces ----------------------------------------------
	   Page + hero banners stay BLACK per the brief. The two surfaces that
	   carry supplied artwork are the ticket CTA band (gold.jpg) and the award
	   accordion art tile (red.jpg). Paths are relative to assets/css/. */
	/* Backs every banner — home hero and interior pages alike.
	   inc/enqueue.php overrides this with the same URL plus a ?v=<filemtime>
	   cache-buster, so replacing the file in place is picked up immediately.
	   This declaration is the no-JS/no-PHP fallback and the colour behind it. */
	--spice-banner-bg:      url("../img/spice-banner.jpg") center / cover no-repeat, #A81A12;
	--spice-banner-ink:     var(--spice-white);

	--spice-cta-bg:         url("../img/gold.jpg") center / cover no-repeat, #C88810;
	--spice-cta-ink:        var(--spice-white);

	--spice-results-art-bg: url("../img/red.jpg") center / cover no-repeat, #A81A12;

	/* --- Type --------------------------------------------------------- */
	--spice-font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--spice-font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;

	--spice-fs-banner:    clamp(2rem, 1.2rem + 2.6vw, 3rem);      /* 48px */
	--spice-fs-h1:        clamp(1.9rem, 1.2rem + 2.2vw, 2.5rem);  /* 40px */
	--spice-fs-h2:        clamp(1.5rem, 1.1rem + 1.4vw, 2rem);    /* 32px */
	--spice-fs-h3:        1.25rem;                                 /* 20px */
	--spice-fs-h4:        1.0625rem;                               /* 17px */
	--spice-fs-body:      1rem;                                    /* 16px */
	--spice-fs-small:     0.875rem;                                /* 14px */

	--spice-lh-tight:     1.15;
	--spice-lh-body:      1.6;

	/* --- Layout ------------------------------------------------------- */
	--spice-container:    1280px;
	--spice-gutter:       clamp(1rem, 0.4rem + 2vw, 2.5rem);

	--spice-radius-sm:    8px;
	--spice-radius:       12px;
	--spice-radius-lg:    16px;
	--spice-radius-pill:  999px;

	--spice-space-section: clamp(3rem, 2rem + 4vw, 5.5rem);

	/* Banners sit almost edge to edge, with this much white space around them. */
	--spice-hero-inset:    30px;

	/* Header lockup: --box is the row height the nav aligns to, --h is how big
	   the logo actually renders. The difference overflows below the row. */
	--spice-logo-box:      62px;
	--spice-logo-h:        124px;

	/* Results table: one row, and how many rows an open accordion shows before
	   it scrolls. */
	--spice-results-row-h:  54px;
	--spice-results-rows:   6;

	--spice-shadow-card:  0 1px 2px rgba(22, 32, 43, .06), 0 8px 24px rgba(22, 32, 43, .05);

	/* --- Bootstrap overrides ------------------------------------------ */
	--bs-body-font-family: var(--spice-font-body);
	--bs-body-font-size:   var(--spice-fs-body);
	--bs-body-color:       var(--spice-body);
	--bs-heading-color:    var(--spice-ink);
	/* Bootstrap 5.3 colours <a> from the *-rgb pair, not the hex vars, so both
	   must be set or links fall back to Bootstrap blue. */
	--bs-link-color:           var(--spice-ink);
	--bs-link-color-rgb:       22, 32, 43;        /* --spice-ink */
	--bs-link-hover-color:     var(--spice-gold-dark);
	--bs-link-hover-color-rgb: 168, 127, 40;      /* --spice-gold-dark */
	--bs-border-color:     var(--spice-line);
}