/*
 * Aspire Shop — design tokens.
 * Single source of truth for colour, type, spacing, radii, breakpoints.
 *
 * NOTE: these are neutral PLACEHOLDER values pending the brand/design brief.
 * Replace the palette and type scale here — never hard-code them in other stylesheets.
 */

:root {
	/* Brand */
	/*
	 * Platform palette — red, black and white, taken from the Aspire Shop mark.
	 * Institutions override --c-brand / --c-accent inline, so these only dress the
	 * main site and act as the fallback for an institution that sets no colours.
	 */
	--c-brand:            #111213;
	--c-brand-dark:       #000000;
	--c-accent:           #e30613;
	--c-accent-dark:      #b70410;

	/* Neutrals */
	--c-ink:              #17181c;
	--c-body:            #4a4f5a;
	--c-muted:            #767c88;
	--c-line:             #e2e5ea;
	--c-surface:          #ffffff;
	--c-surface-alt:      #f6f7f9;

	/* Status */
	--c-success:          #2e7d46;
	--c-error:            #b3261e;

	/* Typography */
	/*
	 * Poppins is the platform default. An institution that picks its own fonts
	 * redefines these two tokens inline, so everything built on them rebrands with it.
	 */
	--font-body:          "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-head:          var(--font-body);

	--fs-xs:              0.8125rem;   /* 13px */
	--fs-sm:              0.875rem;    /* 14px */
	--fs-base:            1rem;        /* 16px */
	--fs-lg:              1.125rem;    /* 18px */
	--fs-xl:              1.375rem;    /* 22px */
	--fs-2xl:             1.75rem;     /* 28px */
	--fs-3xl:             2.25rem;     /* 36px */
	--fs-4xl:             3rem;        /* 48px */

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

	--fw-regular:         400;
	--fw-medium:          500;
	--fw-semibold:        600;
	--fw-bold:            700;

	/* Spacing scale */
	--sp-1:               0.25rem;
	--sp-2:               0.5rem;
	--sp-3:               0.75rem;
	--sp-4:               1rem;
	--sp-5:               1.5rem;
	--sp-6:               2rem;
	--sp-7:               3rem;
	--sp-8:               4rem;
	--sp-9:               6rem;

	/* Layout */
	--container:          1200px;
	--container-narrow:   760px;
	--gutter:             var(--sp-4);

	/* Radii + shadow */
	--radius-sm:          8px;
	--radius:             14px;
	--radius-lg:          22px;
	--radius-pill:        999px;

	/*
	 * Interactive controls — buttons, text inputs, selects — are fully rounded.
	 * Change this one value to move the whole UI between pill and soft-corner.
	 */
	/*
	 * Logo sizing — one definition so the header and footer marks stay identical.
	 * Narrow on small screens so the logo, account, basket and menu button all fit on
	 * one row; the header wraps rather than shrinks, so this has to be sized to fit.
	 */
	--logo-max-w:         150px;
	--logo-max-h:         34px;

	--radius-control:     var(--radius-pill);
	/* Multi-line and panel surfaces can't be pills, so they follow --radius. */
	--radius-field:       var(--radius);
	--shadow-sm:          0 1px 2px rgba(23, 24, 28, 0.06);
	--shadow:             0 4px 16px rgba(23, 24, 28, 0.08);

	/* Motion */
	--transition:         180ms ease;
}

/*
 * Breakpoints (documented — CSS custom properties can't be used in media queries):
 *   sm  480px
 *   md  768px
 *   lg  1024px
 *   xl  1280px
 * Mobile-first: write base styles for small screens, then min-width queries.
 */

@media (min-width: 768px) {
	:root {
		--gutter: var(--sp-5);
		/*
		 * Generous width so height is what actually governs both marks. The header and
		 * footer logos are often different files with different proportions; capping
		 * width made the wider one shorter than the other and they stopped matching.
		 */
		--logo-max-w: 280px;
		--logo-max-h: 44px;
	}
}