/*
 * Sprout News — design tokens (static primitives layer).
 *
 * Colour-free design foundation: spacing, type scale, radius, elevation,
 * z-index, media aspect-ratios and motion. The Customizer-driven COLOUR layer
 * (--sp-* / --sprout-brand-*) is defined in assets/css/theme.css and overridden
 * by inc/branding-system.php (sprout_brand_css), both of which load AFTER this
 * file. Loaded as handle 'sprout-tokens', a dependency of 'aen-theme'.
 *
 * Responsive breakpoints (used as @media literals across theme.css):
 *   small   : 40rem  (640px)  — phone → large phone / tablet portrait
 *   medium  : 60rem  (960px)  — tablet → small desktop (rail splits here)
 *   large   : 75rem  (1200px) — wide desktop
 *
 * @package sprout-news
 */

:root {
	/* ---- Spacing scale — 4px base, geometric-ish ---- */
	--sp-1: 0.25rem;   /*  4 */
	--sp-2: 0.5rem;    /*  8 */
	--sp-3: 0.75rem;   /* 12 */
	--sp-4: 1rem;      /* 16 */
	--sp-5: 1.5rem;    /* 24 */
	--sp-6: 2rem;      /* 32 */
	--sp-7: 3rem;      /* 48 */
	--sp-8: 4rem;      /* 64 — section vertical rhythm (desktop) */
	--sp-9: 6rem;      /* 96 */
	--sp-section: clamp(var(--sp-7), 4vw + 1rem, var(--sp-8));

	/* ---- Fluid type scale ---- */
	--sp-fs--1: 0.8125rem;   /* 13 — fine print / meta */
	--sp-fs-0:  0.9375rem;   /* 15 — body base */
	--sp-fs-1:  1.0625rem;   /* 17 */
	--sp-fs-2:  1.1875rem;   /* 19 */
	--sp-fs-3:  1.375rem;    /* 22 */
	--sp-fs-4:  clamp(1.375rem, 1.15rem + 1vw, 1.75rem);      /* section lead */
	--sp-fs-5:  clamp(1.625rem, 1.2rem + 2vw, 2.375rem);      /* hero headline */
	--sp-fs-6:  clamp(1.875rem, 1.35rem + 2.6vw, 2.875rem);   /* article H1 */

	--sp-lh-tight:   1.15;
	--sp-lh-snug:    1.3;
	--sp-lh-normal:  1.55;
	--sp-lh-relaxed: 1.8;   /* Devanagari body copy */

	--sp-tracking-eyebrow: 0.09em;

	/* ---- Radius ---- */
	--sp-radius-sm:   4px;
	--sp-radius-md:   8px;
	--sp-radius-card: 10px;   /* main image/news cards — City Big News, related, search, directory */
	--sp-radius-lg:   14px;
	--sp-radius-pill: 999px;

	/* ---- Elevation (warm-neutral shadow, not slate) ---- */
	--sp-shadow-1: 0 1px 2px rgba(17, 19, 18, 0.05);
	--sp-shadow-2: 0 6px 20px rgba(17, 19, 18, 0.09);
	--sp-shadow-3: 0 16px 40px rgba(17, 19, 18, 0.14);

	/* ---- Z-index ----
	   --sp-z-popover / --sp-z-nav-dropdown added in P15 Batch 2: two tiers
	   production CSS already needed above --sp-z-modal (the card-share popover
	   and the header edition/language dropdown) but that this scale had no
	   token for. Values match what theme.css already used as plain literals —
	   this documents the existing hierarchy, it does not change it. */
	--sp-z-sticky:       50;
	--sp-z-dropdown:     60;
	--sp-z-overlay:      90;
	--sp-z-modal:        100;
	--sp-z-popover:      1000;
	--sp-z-nav-dropdown: 2000;

	/* ---- Media aspect ratios ---- */
	--sp-ar-hero:   16 / 9;
	--sp-ar-card:   3 / 2;
	--sp-ar-thumb:  4 / 3;
	--sp-ar-square: 1 / 1;

	/* ---- Motion ---- */
	--sp-ease:      cubic-bezier(0.2, 0.6, 0.2, 1);
	--sp-dur-fast:  0.12s;
	--sp-dur:       0.2s;
}

/* ---- Element base ---- */
hr,
.sprout-divider {
	border: 0;
	height: 1px;
	background: var(--sp-border, #e4e4e2);
	margin: var(--sp-6) 0;
}
.sprout-divider--bleed {
	margin-inline: calc(var(--sprout-gutter, 24px) * -1);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sp-accent, #fdd706);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--sp-accent, #fdd706);
	color: var(--sp-on-accent, #111312);
}

/* ---- Media aspect-ratio helpers ---- */
.sp-media {
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--sp-surface-2, #f3f3f1);
}
.sp-media > img,
.sp-media > iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sp-ar-hero  { aspect-ratio: var(--sp-ar-hero); }
.sp-ar-card  { aspect-ratio: var(--sp-ar-card); }
.sp-ar-thumb { aspect-ratio: var(--sp-ar-thumb); }
.sp-ar-square { aspect-ratio: var(--sp-ar-square); }

/* ---- Reduced motion — global QA-safe kill-switch ----
   Fires ONLY when the OS/browser (or a test runner emulating the media
   feature — Chromium DevTools' "Emulate CSS media feature" and Playwright's
   `reducedMotion: 'reduce'` both toggle this) requests reduced motion. It
   never disables animation for a normal visitor with no such preference, and
   it never removes an @keyframes rule, a transition property, or any JS
   carousel/marquee — those all stay fully intact and fully animated for
   everyone else.
   What it does: collapses every animation/transition's DURATION and DELAY
   to effectively 0 (0.01ms, not literal 0, so `transitionend`/`animationend`
   listeners some scripts depend on still fire) and caps every animation's
   iteration-count at 1, on every element site-wide — not just the ones that
   already read --sp-dur/--sp-dur-fast. This is what actually satisfies the
   brief: an entrance fade reaches its visible end-state instantly instead of
   staying invisible for its animation's duration; an infinite pulse/blink
   (the ticker dot, the live badge) runs its one iteration and stops at that
   keyframe's own end-state (both of this theme's infinite animations end at
   full, visible opacity — confirmed, not assumed) instead of looping forever
   through a screenshot; a CSS-only carousel slide transition snaps instantly
   to whichever slide is already marked active, rather than fading. Layout
   itself is never touched (only duration/delay/iteration-count properties),
   so nothing shifts and nothing is hidden that a normal render would show.
   scroll-behavior:auto stops smooth-scroll (e.g. the shorts-row rail) from
   still being mid-scroll when an automated tool captures a frame.
   JS-driven timers (the hero carousel's autoplay, the ticker's marquee
   speed/loop) are a separate mechanism this CSS cannot reach — both already
   check `matchMedia('(prefers-reduced-motion: reduce)')` in assets/js/
   theme.js (initHeroCarousel / initMarquee) and fully stop autoplay /
   collapse to one static, non-scrolling copy, so a carousel can never change
   slides — and a marquee can never keep scrolling — mid-screenshot either. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--sp-dur-fast: 0.001s;
		--sp-dur: 0.001s;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}