/**
 * Torneo de Invierno - Foundation Styles
 *
 * CSS custom properties, typography, body styles, and base resets.
 * All custom properties use the --mo-torneo-invierno- prefix for namespacing.
 *
 * @package MO_Torneo_Invierno
 * @since   1.0.0
 */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
	/* --- Brand (Azul/Celeste — rebrand AFA 2026) ---
	   SYNC CONTRACT (rebrand Fase C): estos 9 brand tokens deben permanecer
	   IDÉNTICOS en plugin/assets/css/base.css y theme/assets/css/base.css.
	   Hay dos :root a propósito (orden de carga: el plugin solo encola base.css
	   en app-pages; el theme lo encola en todo el front + editor). Para futuros
	   rebrands editar AMBOS y verificar paridad con:
	     diff <(grep -E '^\s*--mo-torneo-invierno-(primary|primary-strong|secondary|accent|navy|cream|contrast|black|gold):' plugin/.../base.css) \
	          <(grep -E ... theme/.../base.css)   # → vacío */
	--mo-torneo-invierno-primary:        #375AFC;  /* cobalto — acción/marca */
	--mo-torneo-invierno-primary-strong: #166CF9;  /* azure — hover + ancla de gradiente */
	--mo-torneo-invierno-secondary:      #5B97C9;  /* acero — secundario/bordes/labels */
	--mo-torneo-invierno-accent:         #98CEF0;  /* celeste — nav, franjas, decoración */
	--mo-torneo-invierno-navy:           #003381;  /* footer, base del hero, banners */
	--mo-torneo-invierno-cream:          #EAF7FE;  /* fondos suaves (ya on-brand) */
	--mo-torneo-invierno-contrast:       #252657;  /* índigo — texto de cuerpo, títulos */
	--mo-torneo-invierno-black:          #000000;  /* contraste extremo, sombras */
	--mo-torneo-invierno-gold:           #F2B705;  /* pop acotado: estrellas footer + campeón premiación */

	/* --- Superficie / tema (DARK por defecto; tema claro = override futuro) ---
	   El fondo oscuro de toda la app lo aplica el `body` de ESTE archivo (theme).
	   Estos tokens los consume el CSS que pinta texto/links DIRECTO sobre el fondo
	   (NO el de las cards: ahí el texto sigue oscuro). Tema claro futuro = sobrescribir
	   el background del body + estos 3 tokens bajo una clase (ej. .theme-light). */
	--mo-torneo-invierno-on-surface:       #EAF2FF;  /* texto sobre el fondo oscuro */
	--mo-torneo-invierno-on-surface-muted: #9FB3D9;  /* texto secundario sobre el fondo */
	--mo-torneo-invierno-surface-link:     #98CEF0;  /* links sobre el fondo (= celeste) */

	/* --- Neutral Palette --- */
	--mo-torneo-invierno-white:     #FFFFFF;
	--mo-torneo-invierno-gray-100:  #F3F4F6;
	--mo-torneo-invierno-gray-200:  #E5E7EB;
	--mo-torneo-invierno-gray-300:  #D1D5DB;
	--mo-torneo-invierno-gray-400:  #9CA3AF;
	--mo-torneo-invierno-gray-500:  #6B7280;
	--mo-torneo-invierno-gray-600:  #4B5563;
	--mo-torneo-invierno-gray-700:  #374151;

	/* --- Semantic Colors --- */
	--mo-torneo-invierno-success:   #059669;
	--mo-torneo-invierno-warning:   #D97706;
	--mo-torneo-invierno-error:     #DC2626;
	--mo-torneo-invierno-info:      #375AFC;

	/* --- Typography --- */
	--mo-torneo-invierno-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--mo-torneo-invierno-font-system:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--mo-torneo-invierno-font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	/* --- Font Sizes --- */
	--mo-torneo-invierno-text-xs:    0.75rem;   /* 12px */
	--mo-torneo-invierno-text-sm:    0.875rem;  /* 14px */
	--mo-torneo-invierno-text-base:  1rem;      /* 16px */
	--mo-torneo-invierno-text-lg:    1.125rem;  /* 18px */
	--mo-torneo-invierno-text-xl:    1.25rem;   /* 20px */
	--mo-torneo-invierno-text-2xl:   1.5rem;    /* 24px */
	--mo-torneo-invierno-text-3xl:   2rem;      /* 32px */
	--mo-torneo-invierno-text-4xl:   2.5rem;    /* 40px */

	/* --- Spacing --- */
	--mo-torneo-invierno-space-1:  0.25rem;
	--mo-torneo-invierno-space-2:  0.5rem;
	--mo-torneo-invierno-space-3:  0.75rem;
	--mo-torneo-invierno-space-4:  1rem;
	--mo-torneo-invierno-space-5:  1.25rem;
	--mo-torneo-invierno-space-6:  1.5rem;
	--mo-torneo-invierno-space-8:  2rem;
	--mo-torneo-invierno-space-10: 2.5rem;
	--mo-torneo-invierno-space-12: 3rem;
	--mo-torneo-invierno-space-16: 4rem;

	/* --- Border Radius --- */
	--mo-torneo-invierno-radius-sm:   0.25rem;
	--mo-torneo-invierno-radius-md:   0.5rem;
	--mo-torneo-invierno-radius-lg:   0.75rem;
	--mo-torneo-invierno-radius-xl:   1rem;
	--mo-torneo-invierno-radius-full: 9999px;

	/* --- Shadows --- */
	--mo-torneo-invierno-shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--mo-torneo-invierno-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--mo-torneo-invierno-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--mo-torneo-invierno-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

	/* --- Transitions --- */
	--mo-torneo-invierno-transition-fast:   150ms ease;
	--mo-torneo-invierno-transition-normal: 250ms ease;
	--mo-torneo-invierno-transition-slow:   350ms ease;
}


/* ==========================================================================
   2. Base Resets & Box Sizing
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

body {
	font-family: var(--mo-torneo-invierno-font-body);
	font-size: var(--mo-torneo-invierno-text-base);
	line-height: 1.6;
	/* Texto heredado queda OSCURO: las cards/paneles claros de los módulos siguen
	   legibles. El texto que va DIRECTO sobre el fondo usa --on-surface (claro). */
	color: var(--mo-torneo-invierno-contrast);
	/* Tema oscuro (default) — fondo de TODA la app. CSS puro, sin imágenes:
	   glow cobalto + glow celeste + trama de puntos celeste sobre base navy.
	   `scroll` (no `fixed`) para evitar jank de repaint en mobile. */
	min-height: 100vh;
	background-color: #04173F;
	background-image:
		radial-gradient(70vw 55vh at 12% -8%, rgba(55, 90, 252, 0.40), transparent 60%),
		radial-gradient(55vw 45vh at 100% 6%, rgba(152, 206, 240, 0.14), transparent 55%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23FFFFFF' fill-opacity='0.08'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat, repeat;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mo-torneo-invierno-font-body);
	font-weight: 700;
	line-height: 1.3;
	color: var(--mo-torneo-invierno-contrast);
	margin-top: 0;
}

h1 { font-size: var(--mo-torneo-invierno-text-4xl); }
h2 { font-size: var(--mo-torneo-invierno-text-3xl); }
h3 { font-size: var(--mo-torneo-invierno-text-2xl); }
h4 { font-size: var(--mo-torneo-invierno-text-xl); }
h5 { font-size: var(--mo-torneo-invierno-text-lg); }
h6 { font-size: var(--mo-torneo-invierno-text-base); }

p {
	margin-top: 0;
	margin-bottom: var(--mo-torneo-invierno-space-4);
}

a {
	color: var(--mo-torneo-invierno-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--mo-torneo-invierno-transition-fast);
}

a:hover,
a:focus {
	color: var(--mo-torneo-invierno-secondary);
}

strong, b {
	font-weight: 700;
}

small {
	font-size: var(--mo-torneo-invierno-text-sm);
}

code, pre, kbd {
	font-family: var(--mo-torneo-invierno-font-mono);
	font-size: 0.9em;
}

code {
	background-color: var(--mo-torneo-invierno-gray-100);
	padding: 0.15em 0.4em;
	border-radius: var(--mo-torneo-invierno-radius-sm);
}

pre {
	background-color: var(--mo-torneo-invierno-gray-100);
	padding: var(--mo-torneo-invierno-space-4);
	border-radius: var(--mo-torneo-invierno-radius-md);
	overflow-x: auto;
}

pre code {
	background: none;
	padding: 0;
}


/* ==========================================================================
   4. Body & Layout Utilities
   ========================================================================== */

img {
	max-width: 100%;
	height: auto;
	display: block;
}

hr {
	border: none;
	border-top: 1px solid var(--mo-torneo-invierno-gray-300);
	margin: var(--mo-torneo-invierno-space-8) 0;
}


/* ==========================================================================
   5. Selection
   ========================================================================== */

::selection {
	background-color: var(--mo-torneo-invierno-accent);
	color: var(--mo-torneo-invierno-contrast);
}


/* ==========================================================================
   6. Focus Styles (Accessibility)
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--mo-torneo-invierno-primary);
	outline-offset: 2px;
}


/* ==========================================================================
   7. Utility Classes
   ========================================================================== */

.mo-torneo-invierno-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.mo-torneo-invierno-text-center { text-align: center; }
.mo-torneo-invierno-text-left   { text-align: left; }
.mo-torneo-invierno-text-right  { text-align: right; }

.mo-torneo-invierno-text-primary   { color: var(--mo-torneo-invierno-primary); }
.mo-torneo-invierno-text-secondary { color: var(--mo-torneo-invierno-secondary); }
.mo-torneo-invierno-text-accent    { color: var(--mo-torneo-invierno-accent); }
.mo-torneo-invierno-text-muted     { color: var(--mo-torneo-invierno-gray-500); }
.mo-torneo-invierno-text-contrast  { color: var(--mo-torneo-invierno-contrast); }

.mo-torneo-invierno-bg-primary   { background-color: var(--mo-torneo-invierno-primary); }
.mo-torneo-invierno-bg-secondary { background-color: var(--mo-torneo-invierno-secondary); }
.mo-torneo-invierno-bg-accent    { background-color: var(--mo-torneo-invierno-accent); }
.mo-torneo-invierno-bg-cream     { background-color: var(--mo-torneo-invierno-cream); }
.mo-torneo-invierno-bg-contrast  { background-color: var(--mo-torneo-invierno-contrast); }