/**
 * Variables CSS del Template RDash
 *
 * RESPONSABILIDAD: SOLO variables CSS globales
 * - Colores (--color-*)
 * - Tipografía (--font-*, --line-height-*, --font-weight-*)
 * - Espaciados (--spacing-*)
 * - Bordes (--border-*)
 * - Sombras (--shadow-*)
 * - Transiciones (--transition-*)
 * - Z-index (--z-*)
 * - Gradientes (--gradient-*)
 * - Breakpoints (--breakpoint-*)
 *
 * NO debe contener:
 * - Selectores de elementos (body, a, h1, etc. van en style.css)
 * - Clases utilitarias (van en utilities.css o style.css)
 * - Estilos aplicados (SOLO variables en :root)
 *
 * @package ROI_Theme
 * @since 1.0.0
 */

:root {
	/* ========================================
	   COLORES PRINCIPALES - Paleta RDash
	   ======================================== */

	/* Azules - Template variables */
	--color-navy-dark: #0E2337;        /* Navbar background */
	--color-navy-primary: #1e3a5f;     /* Navy primary (template) */
	--color-navy-light: #2c5282;       /* Navy light (template) */
	--color-blue-primary: #1e3a5f;     /* Hero gradient start */
	--color-blue-secondary: #2c5282;   /* Hero gradient end */
	--color-blue-light: #1a73e8;       /* Links, accents */

	/* Turquesa / Cyan */
	--color-cyan-primary: #61c7cd;     /* Links hover, highlights */
	--color-cyan-dark: #4db8c4;        /* Cyan darker variant */
	--color-cyan-darker: #4fb3b9;      /* Notification bar hover */

	/* Naranjas */
	--color-orange-primary: #FF8600;   /* CTA primary */
	--color-orange-secondary: #FFB800; /* CTA gradient end */
	--color-orange-light: #FFB800;     /* Orange light (template) */
	--color-orange-button: #FF6B35;    /* Let's Talk button start */
	--color-orange-button-end: #FF8C42;/* Let's Talk button end */
	--color-orange-hover: #FF6B35;     /* Orange hover state (template) */

	/* Neutrales - Template variables */
	--color-neutral-50: #f8f9fa;       /* Light backgrounds (template) */
	--color-neutral-100: #e9ecef;      /* Borders light (template) */
	--color-neutral-600: #495057;      /* Text default (template) */
	--color-neutral-700: #6c757d;      /* Text secondary (template) */

	/* Grises */
	--color-slate-gray: #4C5C6B;       /* Notification bar background */
	--color-gray-50: #f8f9fa;          /* Light backgrounds */
	--color-gray-100: #f7fafc;         /* Related posts background */
	--color-gray-200: #e9ecef;         /* Borders light */
	--color-gray-300: #dee2e6;         /* Borders */
	--color-gray-400: #cbd5e0;         /* Scrollbar */
	--color-gray-500: #a0aec0;         /* Scrollbar hover */
	--color-gray-600: #6c757d;         /* Text secondary */
	--color-gray-700: #495057;         /* Text default */
	--color-gray-800: #333;            /* Body text */
	--color-gray-900: #212529;         /* Headings */
	--color-gray-dark: #1a1a1a;        /* Footer background */

	/* Blancos y negros */
	--color-white: #ffffff;
	--color-black: #000000;

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

	/* Template usa Poppins (cargado via Google Fonts en enqueue-scripts.php) */
	--font-family-base: 'Poppins', sans-serif;
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--font-size-base: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-base: 1.5;
	--line-height-tight: 1.25;
	--line-height-loose: 1.8;

	/* ========================================
	   ESPACIADOS
	   ======================================== */

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

	/* ========================================
	   BORDES
	   ======================================== */

	--border-width: 1px;
	--border-width-thick: 2px;
	--border-width-thicker: 3px;
	--border-width-lateral: 4px;

	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;
	--border-radius-xl: 16px;

	--border-color-light: var(--color-gray-200);
	--border-color-default: var(--color-gray-300);

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

	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
	--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);
	--shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.3);

	/* Sombras específicas de componentes */
	--shadow-navbar: 0 2px 4px rgba(0, 0, 0, 0.15);
	--shadow-navbar-scrolled: 0 4px 12px rgba(0, 0, 0, 0.25);
	--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-cta: 0 8px 24px rgba(255, 133, 0, 0.3);
	--shadow-cta-hover: 0 12px 32px rgba(255, 133, 0, 0.4);
	--shadow-button: 0 4px 12px rgba(255, 107, 53, 0.3);
	--shadow-related-posts: 0 12px 32px rgba(26, 115, 232, 0.15);
	--shadow-pagination: 0 4px 12px rgba(26, 115, 232, 0.3);

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

	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
	--transition-cubic: cubic-bezier(0.4, 0, 0.2, 1);

	/* ========================================
	   Z-INDEX
	   ======================================== */

	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-navbar: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;

	/* ========================================
	   GRADIENTES
	   ======================================== */

	--gradient-hero: linear-gradient(135deg, var(--color-blue-primary) 0%, var(--color-blue-secondary) 100%);
	--gradient-cta: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-secondary) 100%);
	--gradient-button-lets-talk: linear-gradient(135deg, var(--color-orange-button) 0%, var(--color-orange-button-end) 100%);
	--gradient-pagination: linear-gradient(135deg, var(--color-blue-primary) 0%, var(--color-blue-secondary) 100%);
	--gradient-underline: linear-gradient(90deg, var(--color-cyan-primary) 0%, var(--color-cyan-dark) 100%);
	--gradient-border-related: linear-gradient(180deg, var(--color-blue-primary) 0%, var(--color-blue-light) 100%);

	/* ========================================
	   OPACIDADES
	   ======================================== */

	--opacity-disabled: 0.5;
	--opacity-hover: 0.8;
	--opacity-backdrop: 0.5;

	/* ========================================
	   BREAKPOINTS (para uso en calc o clamp)
	   ======================================== */

	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--breakpoint-xxl: 1400px;
}

/* ELIMINADO: body, a, a:hover (movidos a style.css)
 * Este archivo SOLO debe contener :root con variables
 * Los estilos de elementos HTML van en style.css
 */