/**
 * Variables CSS centralizadas del tema Xacobeos
 *
 * Este archivo contiene TODAS las variables de color, spacing, tipografía
 * y otros valores reutilizables del tema.
 *
 * @package Xacobeos
 * @since 2.0.0
 */

:root {
	/* ==========================================================================
	   COLORES PRINCIPALES
	   ========================================================================== */

	/* Azul Xacobeos - Color principal del tema */
	--xacobeos-blue: #2c5aa0;
	--xacobeos-blue-dark: #1e3f73;
	--xacobeos-blue-light: #4a7bc8;
	--xacobeos-blue-pale: rgba(44, 90, 160, 0.05);
	--xacobeos-blue-10: rgba(44, 90, 160, 0.1);
	--xacobeos-blue-20: rgba(44, 90, 160, 0.2);

	/* Rojo Camino - Color secundario */
	--xacobeos-red: #b71c1c;

	/* Amarillo Camino - Para botones principales */
	--camino-yellow: #ffd002;
	--camino-yellow-dark: #e6bb00;

	/* Escala de grises */
	--white: #ffffff;
	--color-white: #ffffff;
	--color-black: #000000;
	--gray-50: #f8f9fa;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--gray-800: #1f2937;
	--gray-900: #111827;

	/* ==========================================================================
	   COLORES SEMÁNTICOS
	   ========================================================================== */

	/* Fondos */
	--bg-primary: var(--color-white);
	--bg-secondary: var(--gray-50);
	--bg-muted: var(--gray-100);
	--bg-accent: var(--xacobeos-blue-pale);

	/* Textos */
	--text-primary: #333;
	--text-secondary: var(--gray-600);
	--text-muted: var(--gray-500);
	--text-inverse: var(--color-white);

	/* Bordes */
	--border-light: var(--gray-200);
	--border-medium: var(--gray-300);
	--border-accent: var(--xacobeos-blue);

	/* ==========================================================================
	   TIPOGRAFÍA
	   ========================================================================== */

	/* Familias de fuentes */
	--font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-serif: 'Lora', Georgia, 'Times New Roman', Times, serif;
	--font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

	/* Variables de fuentes específicas para el tema */
	--font-body: var(--font-sans);      /* Open Sans para texto */
	--font-headings: var(--font-serif); /* Lora para headings */
	--body-font-family: var(--font-sans);
	--body-font-size: var(--font-size-base);
	--body-line-height: 1.6;

	/* Tamaños de fuente */
	--font-size-xs: 0.75rem;    /* 12px */
	--font-size-sm: 0.875rem;   /* 14px */
	--font-size-base: 1rem;     /* 16px */
	--font-size-lg: 1.125rem;   /* 18px */
	--font-size-xl: 1.25rem;    /* 20px */
	--font-size-2xl: 1.5rem;    /* 24px */
	--font-size-3xl: 1.875rem;  /* 30px */
	--font-size-4xl: 2.25rem;   /* 36px */

	/* Pesos de fuente */
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* ==========================================================================
	   ESPACIADO
	   ========================================================================== */

	--space-xs: 0.25rem;  /* 4px */
	--space-sm: 0.5rem;   /* 8px */
	--space-md: 1rem;     /* 16px */
	--space-lg: 1.5rem;   /* 24px */
	--space-xl: 2rem;     /* 32px */
	--space-2xl: 3rem;    /* 48px */

	/* ==========================================================================
	   LAYOUT Y CONTENEDORES
	   ========================================================================== */

	/* Ancho máximo y padding del sitio */
	--max-width-site: 1130px;
	--padding-container: 16px;
	--padding-container-sm: 16px;  /* Mismo padding en mobile */
	--padding-container-md: 16px;  /* Mismo padding en tablet */

	/* ==========================================================================
	   BORDES Y RADIOS
	   ========================================================================== */

	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-full: 9999px;

	/* Tamaños de borde */
	--border-width: 1px;
	--border-width-2: 2px;
	--border-width-4: 4px;

	/* ==========================================================================
	   SOMBRAS
	   ========================================================================== */

	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

	/* Sombra específica para hover */
	--shadow-blue: 0 2px 8px rgba(44, 90, 160, 0.2);

	/* ==========================================================================
	   TRANSICIONES
	   ========================================================================== */

	--transition-base: 200ms ease;
	--transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
	--transition-all: all 200ms ease;

	/* ==========================================================================
	   VARIABLES ESPECÍFICAS DE COMPONENTES
	   ========================================================================== */

	/* Filtros de taxonomía */
	--filter-btn-bg: var(--bg-muted);
	--filter-btn-color: var(--text-primary);
	--filter-btn-hover-bg: var(--xacobeos-blue);
	--filter-btn-hover-color: var(--text-inverse);
	--filter-btn-active-bg: var(--xacobeos-blue);
	--filter-btn-active-color: var(--text-inverse);
	--filter-btn-padding: var(--space-sm) var(--space-md);
	--filter-btn-radius: var(--radius-full);

	/* Estadísticas */
	--stats-bg: var(--xacobeos-blue-pale);
	--stats-border: var(--border-width-4) solid var(--xacobeos-blue);
	--stats-padding: var(--space-md);
	--stats-radius: var(--radius-lg);

	/* Breadcrumbs */
	--breadcrumb-bg: var(--xacobeos-blue-pale);
	--breadcrumb-padding: var(--space-md);
	--breadcrumb-radius: var(--radius-lg);
	--breadcrumb-link-color: var(--xacobeos-blue);
	--breadcrumb-link-hover-color: var(--xacobeos-red);

	/* Badges */
	--badge-bg: var(--xacobeos-blue);
	--badge-color: var(--text-inverse);
	--badge-padding: var(--space-sm) var(--space-md);
	--badge-radius: var(--radius-full);

	/* Page header */
	--page-title-color: var(--xacobeos-blue);
	--page-title-size: 2.5rem;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--bg-primary: var(--gray-900);
		--bg-secondary: var(--gray-800);
		--bg-muted: var(--gray-700);
		--text-primary: var(--gray-100);
		--text-secondary: var(--gray-300);
		--border-light: var(--gray-700);
		--filter-btn-bg: var(--gray-700);
		--filter-btn-color: var(--gray-100);
	}
}