/*
 * variables.css — Design tokens de TodoSobreTodo
 * Referenciar SIEMPRE estas variables. Nunca valores hardcoded.
 */

:root {
	/* ---- Fondos ---- */
	--color-bg-primary:    #00010A; /* Negro Espacial — fondo principal */
	--color-bg-secondary:  #0A0F2A; /* Azul Cosmos — cards, nav, secciones */
	/* ---- Acentos ---- */
	--color-accent-cyan:   #00E5FF; /* Cian Eléctrico — CTA, links, hover */
	--color-accent-blue:   #1A8CFF; /* Azul Neón — botones secundarios */
	--color-accent-violet: #7A4FFF; /* Violeta Nebuloso — gradientes, glow */
	--color-accent-purple: #4829A3; /* Morado Galáctico — apoyo visual */
	--color-accent-gold:   #FCCD4D; /* Dorado Luminoso — acento editorial */

	/* ---- Texto ---- */
	--color-text-primary:   #E6F7FF; /* Blanco Frío — texto principal */
	--color-text-secondary: rgba(230, 247, 255, 0.75); /* Texto secundario */
	--color-text-muted:     rgba(230, 247, 255, 0.5);
	--color-text-accent:    #00E5FF; /* Cian Eléctrico — énfasis */

	/* ---- Tema claro para artículo ---- */
	--color-article-light-bg-primary:   #FFFFFF;
	--color-article-light-bg-secondary: #F1F5F9;
	--color-article-light-surface:      #F8FAFC;
	--color-article-light-surface-alt:  #E2E8F0;
	--color-article-light-text-primary: #0F172A;
	--color-article-light-text-muted:   rgba(15, 23, 42, 0.55);
	--color-article-light-accent:       #0284C7;
	--color-article-light-accent-strong:#075985;
	--color-article-light-border:       rgba(15, 23, 42, 0.09);

	/* ---- Colores por categoría ---- */
	--color-cat-ciencia:       #00E5FF;
	--color-cat-historia:      #FCCD4D;
	--color-cat-misterios:     #7A4FFF;
	--color-cat-espiritualidad:#E6F7FF;
	--color-cat-ocultismo:     #4829A3;
	--color-cat-cultura:       #1A8CFF;
	--color-cat-fenomenos:     #00FFB3;

	/* ---- Tipografía ---- */
	--font-primary:        'Montserrat', sans-serif;
	--font-weight-bold:    700;
	--font-weight-regular: 400;

	/* Escala tipográfica */
	--text-display: 3.5rem;   /* 56px — hero, nombre de marca */
	--text-h1:      2.5rem;   /* 40px — título de artículo */
	--text-h2:      1.75rem;  /* 28px — sección */
	--text-h3:      1.25rem;  /* 20px — card title */
	--text-body:    1rem;     /* 16px — cuerpo */
	--text-caption: 0.8125rem;/* 13px — metadata */

	--line-height-body:    1.7;
	--line-height-heading: 1.2;
	--letter-spacing-heading: -0.02em;
	--letter-spacing-caption:  0.05em;

	/* ---- Gradientes ---- */
	--gradient-hero:    linear-gradient(135deg, #00010A 0%, #0A0F2A 50%, #4829A3 100%);
	--gradient-cta:     linear-gradient(90deg, #1A8CFF 0%, #00E5FF 100%);
	--gradient-overlay: linear-gradient(to bottom, transparent 50%, #00010A 100%);

	/* ---- Efectos ---- */
	--glow-cyan:   0 0 20px rgba(0, 229, 255, 0.4);
	--glow-violet: 0 0 30px rgba(122, 79, 255, 0.5);

	/* ---- Bordes ---- */
	--border-subtle: 1px solid rgba(0, 229, 255, 0.1);
	--border-active: 1px solid rgba(0, 229, 255, 0.35);
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;

	/* ---- Espaciado (escala de 8px) ---- */
	--space-1:  8px;
	--space-2:  16px;
	--space-3:  24px;
	--space-4:  32px;
	--space-5:  40px;
	--space-6:  48px;
	--space-8:  64px;
	--space-10: 80px;
	--space-12: 96px;

	/* ---- Layout ---- */
	--container-max: 1200px;
	--container-padding: var(--space-2); /* 16px — mobile-first */

	/* ---- Transiciones ---- */
	--transition-fast:   150ms ease;
	--transition-normal: 250ms ease;

	/* ---- z-index ---- */
	--z-base:    1;
	--z-above:   10;
	--z-header:  100;
	--z-overlay: 200;
	--z-modal:   300;

	/* ---- Alturas fijas ---- */
	--header-height:          64px;

	--header-height-scrolled: 56px;
	--admin-bar-height:       0px; /* sobreescrito por admin-bar.css cuando la barra WP está activa */
}

/* ---- Container padding responsivo (mobile-first) ---- */
@media (min-width: 768px) {
	:root { --container-padding: var(--space-3); } /* 24px — tablet */
}
@media (min-width: 1024px) {
	:root { --container-padding: var(--space-4); } /* 32px — desktop */
}