/**
 * AnimeHub Design Tokens — Phase 8 P8.H3.
 *
 * Single source of truth for spacing, color, radius, shadow.
 * Loaded EARLY (before all other frontend CSS) so downstream files can
 * reference the new vars. Legacy color/spacing values are also aliased here
 * to gently funnel toward the canonical token without touching old CSS.
 *
 * Strategy:
 *   1. Add the canonical scale (spacing-1..8, gray-50..900, accent palette).
 *   2. Re-declare a handful of legacy `--animehub-*` vars to map onto the new
 *      scale (no breakage; just consistency).
 *   3. Provide normalised section vertical rhythm via a single rule that
 *      legacy CSS no longer needs to manage.
 *   4. Override drifted hex colours where they appear inline (only the ones
 *      that ship in inline <style> / WP block CSS we can't easily edit).
 *
 * Audit basis: `grep -hoE '#[0-9a-fA-F]{3,8}'` across CSS bundle 2026-05-25.
 */

:root {
	/* ----------------------------------------------------------------------
	 * Spacing scale — 4 px base. 8 stops covers everything we use today.
	 * Stop  →  value   role
	 *   1   →   4 px   hairline gap (icon, badge inset)
	 *   2   →   8 px   compact (chip padding, small gap)
	 *   3   →  12 px   inline group gap, small section
	 *   4   →  16 px   standard padding, card gap
	 *   5   →  24 px   container gap, large card
	 *   6   →  32 px   between cards rows, between groups
	 *   7   →  48 px   between sub-sections
	 *   8   →  64 px   between major sections
	 * -------------------------------------------------------------------- */
	--space-1:  4px;
	--space-2:  8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	/* Section vertical rhythm — single source. Use clamp so phone → desktop
	 * scale naturally (40-72 px window). */
	--section-rhythm: clamp(40px, 6vw, 72px);

	/* ----------------------------------------------------------------------
	 * Gray scale — collapse the 7 drifted shades into 6 canonical stops.
	 * Mapping (legacy → token):
	 *   #ffffff / #fff       → --gray-0
	 *   #e8e8ed / #e0e0e0    → --gray-100
	 *   #c3c3cb              → --gray-300
	 *   #a0a0a0 / #999       → --gray-400  (was --animehub-text-secondary)
	 *   #888 / #6b7280       → --gray-500
	 *   #666                 → --gray-600  (was --animehub-text-muted)
	 *   #3a3a3a              → --gray-700  (was --animehub-border-light)
	 *   #2a2a2a / #2a2a30    → --gray-800  (was --animehub-border)
	 *   #1a1a1a              → --gray-900  (was --animehub-secondary)
	 * -------------------------------------------------------------------- */
	--gray-0:   #ffffff;
	--gray-100: #e8e8ed;
	--gray-300: #c3c3cb;
	--gray-400: #a0a0a0;
	--gray-500: #888888;
	--gray-600: #666666;
	--gray-700: #3a3a3a;
	--gray-800: #2a2a2a;
	--gray-900: #1a1a1a;

	/* Semantic badge palette — for genre / type / status chips. */
	--badge-purple: #9b59b6;
	--badge-blue:   #3498db;
	--badge-green:  #27ae60;
	--badge-yellow: #ffd700;
	--badge-red:    #e74c3c;
	--badge-orange: var(--animehub-primary, #ff6b35);

	/* Surface tokens — make intent explicit. */
	--surface-page:     var(--animehub-bg,           #0a0a0a);
	--surface-section:  var(--animehub-bg-secondary, #111111);
	--surface-card:     var(--animehub-bg-card,      #141414);
	--surface-elevated: var(--animehub-bg-elevated,  #1a1a1a);

	/* Border / divider. */
	--border-subtle: var(--gray-800);
	--border-strong: var(--gray-700);
}

/* Map legacy aliases to the new canonical scale. Safe because every legacy
 * declaration in base.css uses the same hex anyway — we just add a fallback
 * stack so downstream files can keep referencing either. */
:root {
	--animehub-text-secondary: var(--gray-400);
	--animehub-text-muted:     var(--gray-600);
	--animehub-border:         var(--gray-800);
	--animehub-border-light:   var(--gray-700);
}

/* ----------------------------------------------------------------------------
 * Section vertical rhythm — single rule. Pages had 3 different patterns
 * (margin:50px 0 / padding:60px 0 / clamp). Now everyone aligns on rhythm.
 *
 * Scoped under `.site-main` so admin/widget contexts aren't affected.
 * -------------------------------------------------------------------------- */
.site-main .home-section,
.site-main .animehub-section,
.site-main section.archive-section,
.site-main .featured-section {
	margin: 0;
	padding-block: var(--section-rhythm);
}
.site-main .home-section + .home-section,
.site-main .animehub-section + .animehub-section {
	padding-top: 0; /* Avoid double padding when stacked. */
}

/* Card grid gap unification. */
.cards-grid {
	gap: var(--space-5);
}
@media (max-width: 768px) {
	.cards-grid {
		gap: var(--space-3);
	}
}

/* Container padding — wire the existing token. */
.container,
.site-main .container {
	padding-inline: var(--animehub-gap, var(--space-5));
}