/* CSS Variables for RunArt Base Theme
   UI/UX Improvements 2025-11:
     - Escala tipográfica ampliada (xs, md, 3xl, 4xl)
     - Line-heights específicos (tight/snug/normal/relaxed/loose)
     - Spacing extendido con --space-9 para secciones espaciosas
     - Mantiene aliases anteriores para retrocompatibilidad
*/
:root {
  /* Color Palette - Blanco y Rojo según plan UI/UX */
  --color-primary: #C30000;        /* Rojo primario (CTAs, acentos) */
  --color-primary-dark: #9A0000;   /* Rojo oscuro (hover) */
  --color-bg: #FFFFFF;             /* Fondo blanco */
  --color-surface: #F5F5F5;        /* Superficie gris muy claro */
  --color-surface-2: #E5E5E5;      /* Superficie gris claro */
  --color-text: #231C1A;           /* Negro profundo (texto principal) */
  --color-text-secondary: #3B3A39; /* Gris carbón (texto secundario) */
  --color-muted: #666666;          /* Gris medio */
  --color-border: #D9D9D9;         /* Gris claro (divisores) */
  --color-accent-bronze: #93867B;  /* Acento metálico bronce (opcional) */

  /* Layout */
  --container-max: 1200px;

  /* Spacing (escala mejorada) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;   /* Agregado para secciones muy espaciosas */

  /* Border & Shadow */
  --radius: 8px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* Spacing aliases (compatibilidad con sistema --espacio-*) */
  --espacio-sm: var(--space-3);    /* 12px */
  --espacio-md: var(--space-4);    /* 16px */
  --espacio-lg: var(--space-5);    /* 24px */
  --espacio-xl: var(--space-6);    /* 32px */
  --espacio-2xl: var(--space-7);   /* 48px */
  --espacio-3xl: var(--space-8);   /* 64px */
  --espacio-4xl: 96px;
  --spacing-md: var(--space-5);    /* Alias adicional */

  /* Color aliases (compatibilidad con nombres alternativos) */
  --color-blanco: #FFFFFF;
  --color-negro: var(--color-text);
  --color-rojo: var(--color-primary);
  --color-texto: var(--color-text);
  --color-gris-medio: var(--color-muted);
  --color-fondo-alt: var(--color-surface);
  --color-borde: var(--color-border);
  --color-dark: var(--color-text);
  --color-white: #FFFFFF;
  --color-gray: var(--color-muted);
  --color-gray-light: var(--color-surface-2);
  --color-link-hover: var(--color-primary);

  /* Hero Background (estandarizado) */
  --hero-bg-angle: 135deg;
  --hero-bg-start: #2c3e50; /* Azul grisáceo oscuro */
  --hero-bg-end:   #34495e; /* Azul grisáceo medio */
  --hero-bg-gradient: linear-gradient(var(--hero-bg-angle), var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);

  /* Border radius variants */
  --radio-sm: 4px;
  --radio-md: var(--radius);       /* 8px */
  --radio-lg: 12px;

  /* Shadow variants */
  --sombra-sm: var(--shadow-1);
  --sombra-md: var(--shadow-2);
  --sombra-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Typography scale (mejorado) */
  --texto-xs: 0.8125rem;           /* 13px */
  --texto-sm: 0.875rem;            /* 14px */
  --texto-base: 1rem;              /* 16px */
  --texto-md: 1.0625rem;           /* 17px */
  --texto-lg: 1.125rem;            /* 18px */
  --texto-xl: 1.25rem;             /* 20px */
  --texto-2xl: 1.5rem;             /* 24px */
  --texto-3xl: 1.875rem;           /* 30px */
  --texto-4xl: 2.25rem;            /* 36px */

  /* Line heights (mejorados) */
  --line-height-tight: 1.3;        /* Títulos grandes */
  --line-height-snug: 1.4;         /* Subtítulos */
  --line-height-normal: 1.6;       /* Texto normal */
  --line-height-relaxed: 1.75;     /* Texto largo */
  --line-height-loose: 1.9;        /* Contenido extenso */

  /* Transitions */
  --transicion-rapida: 0.2s ease;

  /* Breakpoints estándar (documentación) */
  /* --bp-mobile: 430px */
  /* --bp-tablet: 768px */
  /* --bp-desktop: 1024px */
  /* --bp-wide: 1400px */
}