/**
 * Variables CSS específicas para RESCOP
 * Basadas en la extracción de Figma
 */

:root {
  /* === COLORES CORPORATIVOS RESCOP === */
  
  /* Colores principales */
  --rescop-red-primary: #BE252D;      /* Color principal CAMPAÑAS */
  --rescop-red-accent: #ED2E38;       /* Color para títulos destacados */
  --rescop-gray-primary: #404040;     /* Color navegación y títulos */
  
  /* Colores de texto */
  --rescop-text-primary: rgba(0, 0, 0, 1);           /* Negro sólido */
  --rescop-text-secondary: rgba(0, 0, 0, 0.80);      /* Negro 80% */
  --rescop-text-muted: rgba(0, 0, 0, 0.20);          /* Gris muy claro */
  --rescop-text-white: rgba(255, 255, 255, 1);       /* Blanco */
  
  /* Colores de fechas y metadatos */
  --rescop-date-beige: rgba(217, 208, 195, 0.80);    /* Fechas beige */
  --rescop-date-green: rgba(132, 163, 135, 0.80);    /* Fechas verde */
  
  /* === TIPOGRAFÍAS RESCOP === */
  
  /* Familias de fuentes */
  --rescop-font-display: 'Anton', sans-serif;                    /* Títulos impactantes */
  --rescop-font-primary: 'Merriweather Sans', serif;             /* Texto principal */
  --rescop-font-secondary: 'Merriweather', serif;                /* Textos pequeños */
  --rescop-font-ui: 'Montserrat', sans-serif;                   /* UI y botones */
  
  /* === TAMAÑOS DE FUENTE === */
  
  /* Títulos principales */
  --rescop-text-hero: 56px;           /* Hero principal */
  --rescop-text-hero-lh: 80px;        /* Line height hero */
  
  --rescop-text-display: 48px;        /* Títulos sección */
  --rescop-text-display-lh: 72px;     /* Line height display */
  
  --rescop-text-h1: 24px;             /* Títulos H1 */
  --rescop-text-h1-lh: 36px;          /* Line height H1 */
  
  /* Texto base */
  --rescop-text-large: 36px;          /* Texto descriptivo grande */
  --rescop-text-large-lh: 50px;       /* Line height large */
  
  --rescop-text-body: 18px;           /* Texto cuerpo */
  --rescop-text-body-lh: 30px;        /* Line height body */
  
  --rescop-text-small: 15px;          /* Texto pequeño */
  --rescop-text-small-lh: 24px;       /* Line height small */
  
  --rescop-text-tiny: 12px;           /* Texto muy pequeño */
  --rescop-text-tiny-lh: 30px;        /* Line height tiny (espacioso) */
  
  --rescop-text-micro: 10px;          /* Etiquetas */
  
  /* UI elementos */
  --rescop-text-button-large: 20px;   /* Botones grandes */
  --rescop-text-button-large-lh: 30px;
  
  --rescop-text-button: 17px;         /* Botones normales */
  --rescop-text-button-small: 12px;   /* Botones pequeños */
  
  --rescop-text-nav: 24px;           /* Navegación principal */
  --rescop-text-nav-lh: 36px;
  
  --rescop-text-filter: 14px;        /* Filtros */
  --rescop-text-filter-lh: 22px;
  
  /* === PESOS DE FUENTE === */
  --rescop-weight-normal: 400;
  --rescop-weight-medium: 500;
  --rescop-weight-bold: 700;
  
  /* === ESPACIADO ESPECÍFICO === */
  --rescop-space-section: 4rem;      /* Entre secciones */
  --rescop-space-component: 2rem;    /* Entre componentes */
  --rescop-space-element: 1rem;      /* Entre elementos */
  --rescop-space-tight: 0.5rem;      /* Espaciado ajustado */
  
  /* === COMPONENTES ESPECÍFICOS === */
  
  /* Navegación */
  --rescop-nav-height: 80px;
  --rescop-nav-bg: rgba(255, 255, 255, 0.95);
  
  /* Botones */
  --rescop-button-radius: 0;         /* Botones rectangulares */
  --rescop-button-padding-x: 2rem;
  --rescop-button-padding-y: 0.75rem;
  
  /* Cards de noticias */
  --rescop-card-radius: 8px;
  --rescop-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  /* Tags de región */
  --rescop-tag-radius: 12px;
  --rescop-tag-bg: var(--rescop-red-primary);
  --rescop-tag-color: white;
  
  /* === BREAKPOINTS === */
  --rescop-mobile: 480px;
  --rescop-tablet: 768px;
  --rescop-desktop: 1024px;
  --rescop-wide: 1440px;
}

/* === VARIACIONES PARA TEMAS OSCUROS === */
@media (prefers-color-scheme: dark) {
  :root {
    --rescop-text-primary: rgba(255, 255, 255, 1);
    --rescop-text-secondary: rgba(255, 255, 255, 0.80);
    --rescop-text-muted: rgba(255, 255, 255, 0.40);
    --rescop-nav-bg: rgba(0, 0, 0, 0.95);
  }
}