/**
 * Discover Wrexham — design tokens.
 *
 * Athletic-heritage: the red does the shouting, black does the structure, and
 * white does the work. The red is a signal colour, never a surface colour —
 * the moment it becomes a background for long text it stops meaning "act here"
 * and the whole system goes quiet.
 *
 * Type: Archivo (variable, expanded widths) for display — stadium lettering
 * without the Bebas cliché — over Public Sans for body copy.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75..125,400..900;1,75..125,400..900&family=Public+Sans:ital,wght@0,400..700;1,400..700&display=swap');

:root {
	/* ---- Brand ------------------------------------------------------- */
	--dw-red:            #D81A2B;
	--dw-red-hover:      #B31423;
	--dw-red-press:      #8E1019;
	--dw-red-tint:       #FDECEE;
	--dw-red-glow:       rgba(216, 26, 43, 0.28);

	--dw-onyx:           #111111;
	--dw-charcoal:       #222222;
	--dw-slate:          #3A3D42;
	--dw-steel:          #6B7280;

	--dw-white:          #FFFFFF;
	--dw-paper:          #F8F9FA;
	--dw-line:           #E4E7EB;

	/* Wrexham Verified sits apart from the paid red on purpose — an
	   editorial badge must never look purchasable. */
	--dw-verified:       #0F7B4F;
	--dw-verified-tint:  #E8F5EF;

	/* ---- Semantic ---------------------------------------------------- */
	--dw-bg:             var(--dw-white);
	--dw-bg-sunken:      var(--dw-paper);
	--dw-bg-inverse:     var(--dw-onyx);
	--dw-text:           var(--dw-onyx);
	--dw-text-muted:     var(--dw-steel);
	--dw-text-inverse:   var(--dw-white);
	--dw-border:         var(--dw-line);
	--dw-accent:         var(--dw-red);

	/* ---- Type -------------------------------------------------------- */
	--dw-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--dw-font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Fluid scale, 1.25 ratio at the small end opening to 1.333 at the top
	   so headlines gain presence on desktop without body copy bloating. */
	--dw-text-xs:   0.75rem;
	--dw-text-sm:   0.875rem;
	--dw-text-base: 1rem;
	--dw-text-lg:   1.125rem;
	--dw-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--dw-text-2xl:  clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
	--dw-text-3xl:  clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	--dw-text-4xl:  clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
	--dw-text-hero: clamp(2.75rem, 1.2rem + 6.4vw, 6.5rem);

	--dw-tracking-hero:  -0.035em;
	--dw-tracking-tight: -0.02em;
	--dw-tracking-wide:  0.08em;
	--dw-tracking-label: 0.14em;

	--dw-leading-hero: 0.92;
	--dw-leading-head: 1.06;
	--dw-leading-body: 1.6;

	/* ---- Space (4px base) -------------------------------------------- */
	--dw-1:  0.25rem;
	--dw-2:  0.5rem;
	--dw-3:  0.75rem;
	--dw-4:  1rem;
	--dw-5:  1.5rem;
	--dw-6:  2rem;
	--dw-7:  3rem;
	--dw-8:  4rem;
	--dw-9:  6rem;
	--dw-10: 8rem;

	/* ---- Form -------------------------------------------------------- */
	/* Small radii only. Athletic brands are built on hard edges; rounding
	   past 8px starts reading as a consumer app. */
	--dw-radius-sm: 3px;
	--dw-radius:    6px;
	--dw-radius-lg: 10px;

	--dw-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
	--dw-shadow:    0 2px 8px rgba(17, 17, 17, 0.08);
	--dw-shadow-lg: 0 12px 32px rgba(17, 17, 17, 0.14);
	--dw-shadow-red: 0 8px 24px var(--dw-red-glow);

	--dw-container: 1240px;
	--dw-gutter: clamp(1rem, 4vw, 3rem);

	--dw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dw-dur: 180ms;
}

/* Dark surfaces are used deliberately — the hero, the footer, matchday
   modules — rather than as a whole-site theme. */
[data-surface='inverse'] {
	--dw-bg: var(--dw-onyx);
	--dw-bg-sunken: var(--dw-charcoal);
	--dw-text: var(--dw-white);
	--dw-text-muted: #9CA3AF;
	--dw-border: #2E3238;
}

@media (prefers-reduced-motion: reduce) {
	:root { --dw-dur: 0ms; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}