/**
 * VARIABLES CSS - Sogeviso
 * Definición de colores, tipografía y valores reutilizables
 */

:root {
  /* === COLORES === */
  /* Colores corporativos Sogeviso - Según manual de identidad (2016) */
  --color-white: #FFFFFF;            /* 255R 255G 255B - 0C 0M 0Y 0K */
  --color-black: #000000;            /* 0R 0G 0B - 0C 0M 0Y 100K */
  --color-gray-main: #A8A8A8;        /* 168R 168G 168B - PANTONE COOL GRAY 6 - 0C 0M 0Y 40K */
  --color-gray-light: #F5F5F5;       /* Fondos claros */
  --color-gray-medium: #E5E5E5;      /* Bordes */
  --color-gray-dark: #222222;        /* Textos oscuros */
  
  /* Colores semánticos */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-gray-dark);
  --color-text-muted: var(--color-gray-main);
  
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-light);
  --color-bg-card: var(--color-gray-light);
  
  --color-border: var(--color-gray-medium);
  --color-border-light: #EFEFEF;
  
  /* === TIPOGRAFÍA === */
  /* Según manual de identidad corporativa Sogeviso (2016) */
  --font-primary: Helvetica, Arial, sans-serif;
  --font-weight-light: 300;      /* Helvética Light */
  --font-weight-normal: 400;     /* Helvética Regular */
  --font-weight-bold: 700;       /* Helvética Bold */
  
  /* Tamaños de fuente base */
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-tiny: 12px;
  
  /* Tamaños responsivos */
  --font-size-h1: clamp(28px, 5vw, 48px);
  --font-size-h2: clamp(24px, 4vw, 36px);
  --font-size-h3: clamp(20px, 3vw, 28px);
  --font-size-h4: clamp(18px, 2.5vw, 24px);
  
  --line-height-base: 1.6;
  --line-height-heading: 1.2;
  --line-height-tight: 1.4;
  
  /* === ESPACIADO === */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  
  /* === LAYOUT === */
  --container-max-width: 1200px;
  --container-padding: 24px;
  
  /* === BORDER RADIUS === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* === TRANSICIONES === */
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
  --transition-slow: 0.5s;
  --easing-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* === SOMBRAS === */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* === Z-INDEX === */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-fixed: 100;
  --z-modal: 1000;
  --z-tooltip: 2000;
  
  /* === BREAKPOINTS (para uso en media queries) === */
  /* Mobile: hasta 767px */
  /* Tablet: 768px - 1023px */
  /* Desktop: 1024px+ */
}

/* Ajustes para modo oscuro (opcional, por si se implementa en el futuro) */
@media (prefers-color-scheme: dark) {
  /* :root {
    --color-bg-primary: #1A1A1A;
    --color-text-primary: #FFFFFF;
  } */
}