/*
 * tokens.css — Design system tokens for MéxicoChess redesign.
 *
 * Source of truth: rating-nacional.html mockup (Fase B reference).
 * Loaded before global.css so existing styles can adopt tokens incrementally
 * without rewriting layout. Adding a new token? Update the mockup spec too.
 *
 * Naming:
 *   --neutral-*   grayscale ramp (0 = white, 1000 = black)
 *   --accent-*    azul talavera ramp (50 = lightest, 800 = darkest)
 *   --text-*      semantic text colors
 *   --bg-*        semantic surface colors
 *   --border-*    border opacities
 *   --space-*     4px-based spacing scale
 *   --radius-*    border-radius scale
 *   --transition* shared timing
 *   --container-* page width tokens
 */

:root{
	/* ── Neutral ramp ─────────────────────────────────────── */
	--neutral-0:    #FFFFFF;
	--neutral-50:   #F5F5F0;
	--neutral-100:  #E8E7E0;
	--neutral-200:  #D3D1C7;
	--neutral-400:  #888780;
	--neutral-600:  #5F5E5A;
	--neutral-800:  #2C2C2A;
	--neutral-1000: #000000;

	/* ── Accent (azul talavera) ───────────────────────────── */
	--accent-50:  #EDF2F8;
	--accent-100: #DCE6F1;
	--accent-200: #B8C8DC;
	--accent-400: #4A6B8E;
	--accent-600: #1E3A5F;
	--accent-800: #163049;

	/* ── Status ───────────────────────────────────────────── */
	--success: #1F6B45;
	--warning: #8A4F0E;
	--danger:  #B5302E;

	/* ── Semantic text ────────────────────────────────────── */
	--text-primary:   var(--neutral-1000);
	--text-secondary: var(--neutral-600);
	--text-tertiary:  var(--neutral-400);
	--text-on-accent: var(--neutral-0);

	/* ── Semantic surfaces ────────────────────────────────── */
	--bg-page:          var(--neutral-0);
	--bg-elevated:      var(--neutral-0);
	--bg-muted:         var(--neutral-50);
	--bg-accent-subtle: var(--accent-50);

	/* ── Borders ──────────────────────────────────────────── */
	--border-default: rgba(0, 0, 0, 0.10);
	--border-strong:  rgba(0, 0, 0, 0.20);

	/* ── Spacing (4px base) ───────────────────────────────── */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-6:  24px;
	--space-8:  32px;
	--space-12: 48px;
	--space-16: 64px;

	/* ── Radii ────────────────────────────────────────────── */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-full: 9999px;

	/* ── Transitions ──────────────────────────────────────── */
	--transition-fast: 80ms;
	--transition-base: 120ms;

	/* ── Container ────────────────────────────────────────── */
	--container-max:     1280px;
	--container-padding: 32px;
}

@media (max-width: 1080px) {
	:root { --container-padding: 24px; }
}
@media (max-width: 720px) {
	:root { --container-padding: 16px; }
}