/* ============================================================================================================
   SDC BASE (WS-2) — the shared semantic layer loaded on EVERY Sports Data Connector surface.
   Owns the design tokens (light + dark) and keyboard focus visibility, so league.css / match.css /
   livescore.css / sdc-frontend.css and the directory/landing pages all inherit ONE token system and
   correct dark mode. This file carries no component styling — only the foundation. It is registered as a
   dependency of every SDC stylesheet (see SDC_Assets), so it always loads first.
   Tokens are unchanged from the WS-1 foundation (moved here verbatim); no new visual decisions.
   ============================================================================================================ */
:root{
	/* Brand (mode-invariant) */
	--sdc-brand:#2563eb;--sdc-brand-dark:#1d4ed8;--sdc-brand-tint:#eff4ff;
	/* Link text role (WS-7): brand fill/border/focus stay --sdc-brand; text links use --sdc-link so they can
	   lighten in dark mode for contrast without recolouring buttons/borders/rings. Light == brand. */
	--sdc-link:#2563eb;
	/* Text */
	--sdc-ink:#0f172a;--sdc-ink-soft:#334155;--sdc-muted:#64748b;--sdc-muted-2:#94a3b8;
	/* Surfaces & lines */
	--sdc-surface:#fff;--sdc-bg-subtle:#f7f9fc;--sdc-bg-subtle-2:#f8fafc;
	--sdc-line:#e5e7eb;--sdc-line-2:#eef0f4;--sdc-line-3:#f1f5f9;
	/* Semantic status (mode-invariant; distinct visual intents kept separate — consolidation deferred to WS-5) */
	--sdc-success:#16a34a;--sdc-success-2:#22c55e;
	--sdc-danger:#dc2626;--sdc-danger-2:#ef4444;
	--sdc-warn:#f97316;--sdc-warn-2:#b45309;
	--sdc-live:#dc2626;--sdc-draw:#64748b;/* WS-7: was #94a3b8 (white-on 2.56 FAIL); #64748b gives white-on 4.76 AA. Only the D pill consumes it. */
	/* Soft status tints (WS-5) — pill/box backgrounds. live & danger share a hue but stay SEPARATE roles. */
	--sdc-live-tint:#fee2e2;--sdc-danger-tint:#fee2e2;--sdc-warn-tint:#fff7ed;--sdc-success-tint:#dcfce7;--sdc-info-tint:#eff4ff;
	/* Radius scale */
	--sdc-radius-xs:8px;--sdc-radius-sm:12px;--sdc-radius:16px;--sdc-radius-lg:20px;--sdc-radius-pill:999px;
	/* Shadow set */
	--sdc-shadow-sm:0 2px 8px rgba(15,23,42,.05);
	--sdc-shadow:0 2px 10px rgba(15,23,42,.05);
	--sdc-shadow-hover:0 12px 30px rgba(37,99,235,.16);
	--sdc-shadow-hero:0 6px 18px rgba(0,0,0,.28);
	/* Motion */
	--sdc-transition:.16s ease;
	/* Card interaction (WS-3): the shared hover-lift for the whole card family — standard vs compact/nav. */
	--sdc-hover-lift:-3px;--sdc-hover-lift-sm:-2px;
	/* Spacing scale */
	--sdc-space-1:4px;--sdc-space-2:8px;--sdc-space-3:12px;--sdc-space-4:16px;--sdc-space-5:20px;
	--sdc-space-6:24px;--sdc-space-8:32px;--sdc-space-10:40px;--sdc-space-12:48px;
	--sdc-gap:16px;
	/* Component spacing */
	--sdc-card-pad:16px;--sdc-card-pad-lg:20px;--sdc-section-gap:22px;
	/* Hero family (WS-4): ONE gradient + padding + media scale for the page-hero bands (Team keeps its flagship
	   radial overlay on top; H2H detail is a light variant). Presentation only — never changes heading tags. */
	--sdc-hero-grad-from:#0b1220;--sdc-hero-grad-to:#1e3a8a;
	--sdc-hero-pad:44px 32px;--sdc-hero-pad-sm:32px 28px;--sdc-hero-media:96px;
	/* Media sizing */
	--sdc-logo-sm:22px;--sdc-logo-md:34px;--sdc-logo-lg:72px;--sdc-avatar:112px;
	/* Typography (PRESENTATION ONLY — never changes HTML heading levels / H1 / SEO).
	   WS-8: applied role-based. fs-display/fs-hero stay UNUSED on purpose — the page heroes keep their
	   own WS-4 per-hero clamps (rolling these out would shrink the league hero 40→32 / inflate hub/dir),
	   so they are left as reference values, not force-applied. fs-stat retuned 22→28 to match the real
	   primary stat number (.sdc-lp-stat/.sdc-cp-stat .n). */
	--sdc-fs-display:clamp(26px,4vw,40px);--sdc-fs-hero:clamp(24px,4vw,38px);
	--sdc-fs-h-section:20px;--sdc-fs-card-title:16px;--sdc-fs-body:14px;--sdc-fs-label:12px;--sdc-fs-stat:28px;
	--sdc-fw-normal:600;--sdc-fw-bold:700;--sdc-fw-heavy:800;
	--sdc-lh-tight:1.2;--sdc-lh-body:1.55;--sdc-lh-heading:1.15;
	/* Appearance System V1 — SDC Default font stack (Barlow Condensed bundled locally; System UI = no request).
	   Consumed ONLY by the body-class-gated rules below (default/custom) — see the "Typography — Appearance
	   Mode" block. In Inherit mode NEITHER gated rule matches, so .sdc-ui/.sdc-ui h1-h6 carry NO font-family
	   declaration from this file at all, leaving the theme's own heading/body cascade free to apply naturally. */
	--sdc-font-heading:'Barlow Condensed',sans-serif;
	--sdc-font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	/* Breakpoint reference values (documentation; used by @media literals, not consumable inside @media) */
	--sdc-bp-sm:560px;--sdc-bp-md:820px;--sdc-bp-lg:900px;
}
@media (prefers-color-scheme:dark){
	:root{
		--sdc-ink:#e2e8f0;--sdc-ink-soft:#cbd5e1;--sdc-muted:#94a3b8;
		--sdc-link:#60a5fa;/* WS-7: lighter link on dark (brand #2563eb on #0b1220 = 3.62 FAIL; #60a5fa = 7.36 AA). Brand fill unchanged. */
		--sdc-line:#334155;--sdc-surface:#0b1220;--sdc-bg-subtle:#111c33;--sdc-brand-tint:#111c33;
		--sdc-bg-subtle-2:#111c33;--sdc-line-2:#334155;--sdc-line-3:#1e293b;
		/* Dark status tints (WS-5) — deep, low-chroma so status boxes/pills read on a dark surface. */
		--sdc-live-tint:#3a1618;--sdc-danger-tint:#3a1618;--sdc-warn-tint:#3a2a12;--sdc-success-tint:#123122;--sdc-info-tint:#111c33;
	}
}

/* ===== Appearance — owner-controlled Color Mode (Sports Data Connector UI only) =====================
   SYSTEM (default) = the :root + @media(prefers-color-scheme) above → follows each visitor's device, exactly
   as 1.108.2. When the site owner picks Light or Dark, SDC_Appearance adds `sdc-mode-light` / `sdc-mode-dark`
   to <body>, and these two rules re-declare ONLY the 16 mode-varying --sdc-* tokens (values copied verbatim
   from :root / the dark @media — NO colour redesign). They set NO visual property on body/header/footer and
   introduce no element selectors, and the theme never consumes --sdc-*, so ONLY Sports Data content changes.
   body.sdc-mode-* wins over :root because <body> is a nearer ancestor of SDC content than :root, so its token
   values are the ones inherited — overriding the OS preference for SDC content while leaving the site shell
   (and any other plugin) untouched. Pure CSS: no JS, no flash, page-cache safe. ===== */
body.sdc-mode-light{
	--sdc-ink:#0f172a;--sdc-ink-soft:#334155;--sdc-muted:#64748b;--sdc-link:#2563eb;
	--sdc-line:#e5e7eb;--sdc-surface:#fff;--sdc-bg-subtle:#f7f9fc;--sdc-brand-tint:#eff4ff;
	--sdc-bg-subtle-2:#f8fafc;--sdc-line-2:#eef0f4;--sdc-line-3:#f1f5f9;
	--sdc-live-tint:#fee2e2;--sdc-danger-tint:#fee2e2;--sdc-warn-tint:#fff7ed;--sdc-success-tint:#dcfce7;--sdc-info-tint:#eff4ff;
}
body.sdc-mode-dark{
	--sdc-ink:#e2e8f0;--sdc-ink-soft:#cbd5e1;--sdc-muted:#94a3b8;--sdc-link:#60a5fa;
	--sdc-line:#334155;--sdc-surface:#0b1220;--sdc-bg-subtle:#111c33;--sdc-brand-tint:#111c33;
	--sdc-bg-subtle-2:#111c33;--sdc-line-2:#334155;--sdc-line-3:#1e293b;
	--sdc-live-tint:#3a1618;--sdc-danger-tint:#3a1618;--sdc-warn-tint:#3a2a12;--sdc-success-tint:#123122;--sdc-info-tint:#111c33;
}

/* ===== Appearance System V1 — Typography (mode-gated; presentation only, never changes heading tags/H1/SEO).
   Common root: every SDC frontend wrapper additionally carries `.sdc-ui` (see class-sdc-appearance-page.php
   for the full wrapper audit). SDC_Appearance::body_class() adds exactly one `sdc-style-{default|inherit|
   custom}` class to <body>, plus `sdc-font-heading-{slug}` / `sdc-font-body-{slug}` in Custom mode only.

   DEFAULT + CUSTOM: apply --sdc-font-heading/--sdc-font-body (Custom overrides the variables per-slug below;
   Default leaves them at the :root defaults declared above — Barlow Condensed / System UI).
   INHERIT: neither selector below matches `sdc-style-inherit`, so NO font-family rule targets .sdc-ui or its
   headings from this file at all — the surrounding theme's own cascade (h1-h6 selectors, body text) applies
   exactly as it would with no SDC content there. This is deliberate: forcing `font-family:inherit` on headings
   would just clone the parent BODY text font onto them, which is not the same as letting the theme's OWN
   heading rules style them — omitting the declaration entirely is what actually achieves that. ===== */
body.sdc-style-default .sdc-ui,body.sdc-style-custom .sdc-ui{
	font-family:var(--sdc-font-body);
}
body.sdc-style-default .sdc-ui h1,body.sdc-style-default .sdc-ui h2,body.sdc-style-default .sdc-ui h3,
body.sdc-style-default .sdc-ui h4,body.sdc-style-default .sdc-ui h5,body.sdc-style-default .sdc-ui h6,
body.sdc-style-custom .sdc-ui h1,body.sdc-style-custom .sdc-ui h2,body.sdc-style-custom .sdc-ui h3,
body.sdc-style-custom .sdc-ui h4,body.sdc-style-custom .sdc-ui h5,body.sdc-style-custom .sdc-ui h6{
	font-family:var(--sdc-font-heading);
}
/* Custom-mode per-slug variable overrides — only the non-default slugs need a rule (barlow-condensed/system
   ARE the :root defaults already). Scoped to <body> so it never leaks past the SDC subtree; consumed only by
   the two rules above (Default/Custom), never read by the theme. */
body.sdc-font-heading-inter-tight{--sdc-font-heading:'Inter Tight',sans-serif;}
body.sdc-font-heading-roboto-condensed{--sdc-font-heading:'Roboto Condensed',sans-serif;}
body.sdc-font-heading-oswald{--sdc-font-heading:'Oswald',sans-serif;}
body.sdc-font-heading-montserrat{--sdc-font-heading:'Montserrat',sans-serif;}
body.sdc-font-heading-inter{--sdc-font-heading:'Inter',sans-serif;}
body.sdc-font-body-inter{--sdc-font-body:'Inter',sans-serif;}
body.sdc-font-body-roboto{--sdc-font-body:'Roboto',sans-serif;}
body.sdc-font-body-open-sans{--sdc-font-body:'Open Sans',sans-serif;}
body.sdc-font-body-source-sans-3{--sdc-font-body:'Source Sans 3',sans-serif;}
body.sdc-font-body-lato{--sdc-font-body:'Lato',sans-serif;}
body.sdc-font-body-nunito-sans{--sdc-font-body:'Nunito Sans',sans-serif;}

/* ===== Numeric typography — tabular figures so columns of numbers/scores/stats align. Reusable .sdc-num
   utility PLUS the already-audited numeric component selectors. Never applied to prose/body text globally. */
.sdc-num,
.sdc-tbl,.sdc-fx__score,.sdc-h2h__mscore,.sdc-ls__score,.sdc-match__scoreboard,.sdc-lp-stat,.sdc-cp-stat,
.sdc-hub__stat,.sdc-pp-hero__num,.sdc-pc__num,.sdc-pl__num,.sdc-match__num,.sdc-dir__pgnum{
	font-variant-numeric:tabular-nums;
}

/* ===== Keyboard focus visibility — scoped to the common `.sdc-ui` root (hardened from the prior
   attribute-based selector matching any element whose class merely contained the text sdc-, which could
   theoretically match ANY element anywhere carrying such a class, not just inside a genuine SDC module).
   Every SDC wrapper now carries `.sdc-ui`, so this is a strict, equivalent-coverage tightening — not a
   behaviour change. :focus-visible keeps mouse clicks clean; outline-only means no layout shift. ===== */
.sdc-ui a:focus-visible,
.sdc-ui button:focus-visible,
.sdc-ui input:focus-visible,
.sdc-ui select:focus-visible,
.sdc-ui textarea:focus-visible,
.sdc-ui [tabindex]:focus-visible,
.sdc-ui summary:focus-visible{
	outline:2px solid var(--sdc-brand);
	outline-offset:2px;
}

/* WS-7: on the DARK hero bands the brand-blue ring is blue-on-blue (ring vs #1e3a8a = 2.00 → invisible).
   Give focusables inside a dark hero a WHITE ring in that scope only (#fff vs hero = 10.36). Light heroes
   (.sdc-h2h__hero / .sdc-dir__hero) are intentionally EXCLUDED so their ring stays the brand blue. */
.sdc-lp-hero a:focus-visible,.sdc-lp-hero button:focus-visible,.sdc-lp-hero select:focus-visible,
.sdc-cp-hero a:focus-visible,.sdc-cp-hero button:focus-visible,.sdc-cp-hero select:focus-visible,
.sdc-sports__hero a:focus-visible,.sdc-sports__hero button:focus-visible,.sdc-sports__hero select:focus-visible,
.sdc-tp-hero a:focus-visible,.sdc-tp-hero button:focus-visible,.sdc-tp-hero select:focus-visible,
.sdc-pi-hero a:focus-visible,.sdc-pi-hero button:focus-visible,.sdc-pi-hero select:focus-visible,
.sdc-hub__hero a:focus-visible,.sdc-hub__hero button:focus-visible,.sdc-hub__hero select:focus-visible,
select.sdc-lp-season__sel:focus-visible{
	outline-color:#fff;
}