/* ==========================================================================
   UTRACUN — Sistema de diseño / Design tokens
   Derivado del Manual de Marca UTRACUN 2025.
   Cada token está pensado para exportarse 1:1 a un theme de React
   (styled-components / Tailwind config / CSS Modules).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Yellowtail&display=swap');

:root {
  /* ---------------------------------------------------------------- COLOR
     Institucionales (Manual §3.1). El rojo #e30613 es el único color
     literal del manual; azul y dorado se derivan de las especificaciones
     CMYK de la sección Periódico (§6.2) convertidas a sRGB.            */
  --c-rojo: #e30613;
  --c-rojo-osc: #b30410;
  --c-rojo-cla: #ff2b38;
  --c-azul: #1b4b9e;          /* azul institucional del escudo */
  --c-azul-per: #3370ff;      /* azul periódico C80 M56 Y0 K0 */
  --c-azul-osc: #10306b;
  --c-dorado: #c9a227;
  --c-dorado-cla: #e8cf7a;

  /* Neutros cálidos: dan la sensación de papel prensa sin verse sucios */
  --c-tinta: #0e0f12;         /* texto principal */
  --c-tinta-70: #43464f;      /* texto secundario */
  --c-tinta-50: #6d717c;      /* metadatos */
  --c-tinta-30: #a6a9b2;      /* deshabilitado */
  --c-linea: #e2ded6;         /* filetes / hairlines */
  --c-linea-fuerte: #c9c4b8;
  --c-papel: #fbfaf8;         /* fondo editorial */
  --c-papel-2: #f4f2ed;       /* bloques alternos */
  --c-blanco: #ffffff;
  --c-negro: #000000;

  /* Semánticos */
  --c-exito: #0f7b4f;
  --c-exito-bg: #e6f4ec;
  --c-alerta: #b46b00;
  --c-alerta-bg: #fdf3e2;
  --c-error: #c2140f;
  --c-error-bg: #fdecec;
  --c-info: #1b4b9e;
  --c-info-bg: #eaf0fb;

  /* Roles de superficie (se reasignan en modo oscuro) */
  --fondo: var(--c-papel);
  --fondo-elevado: var(--c-blanco);
  --fondo-alterno: var(--c-papel-2);
  --texto: var(--c-tinta);
  --texto-2: var(--c-tinta-70);
  --texto-3: var(--c-tinta-50);
  --linea: var(--c-linea);
  --linea-fuerte: var(--c-linea-fuerte);
  --acento: var(--c-rojo);

  /* --------------------------------------------- COLOR POR SECCIÓN
     Cada sección editorial tiene un color de identificación (modelo
     The Guardian). Permite orientación instantánea sin leer etiquetas. */
  --s-noticias: #e30613;
  --s-comunicados: #1b4b9e;
  --s-periodico: #c9a227;
  --s-eventos: #0f7b4f;
  --s-capacitacion: #6b3fa0;
  --s-documentos: #43464f;
  --s-deportes: #d2571b;
  --s-multimedia: #0e7490;
  --s-salones: #a8144a;
  --s-directorio: #10306b;
  --s-asesoria: #8a5a2b;

  /* ----------------------------------------------------------- TIPOGRAFÍA
     Display  : titulares. Alta contraste, aire de revista.
     Editorial: bajadas y cuerpo largo. Optical sizing para lectura.
     UI       : navegación, etiquetas, datos. Montserrat (Manual §6.2).   */
  --f-display: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --f-editorial: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --f-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-script: 'Yellowtail', cursive;   /* wordmark del imagotipo (Manual §1.1) */
  --f-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* Escala tipográfica fluida (clamp) — 1.25 en móvil, 1.333 en desktop */
  --t-3xs: 0.6875rem;                                  /* 11px etiquetas */
  --t-2xs: 0.75rem;                                    /* 12px metadatos */
  --t-xs: 0.8125rem;                                   /* 13px */
  --t-sm: 0.875rem;                                    /* 14px */
  --t-base: 1rem;                                      /* 16px */
  --t-md: 1.0625rem;                                   /* 17px cuerpo */
  --t-lg: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  --t-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --t-2xl: clamp(1.5rem, 1.4vw + 1.1rem, 2rem);
  --t-3xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --t-4xl: clamp(2rem, 2.6vw + 1.4rem, 3rem);
  --t-5xl: clamp(2.25rem, 3.4vw + 1.4rem, 3.5rem);

  /* Ajuste de lectura accesible: el usuario puede escalar el cuerpo del
     artículo sin romper la maquetación (data-lectura en <html>). */
  --escala-lectura: 1;

  --lh-tight: 1.08;
  --lh-titular: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-lectura: 1.68;

  --tr-etiqueta: 0.12em;   /* letter-spacing de kickers en mayúsculas */
  --tr-nav: 0.04em;

  /* -------------------------------------------------------------- ESPACIO
     Escala de 4px. --gutter y --marco controlan el grid editorial.     */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.25rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-20: 5rem;
  --e-24: 6rem;

  --ancho-max: 1320px;      /* caja gráfica del sitio */
  --ancho-lectura: 44rem;   /* medida óptima ~72 caracteres */
  --ancho-estrecho: 60rem;
  --gutter: clamp(1rem, 2.2vw, 2rem);
  --marco: clamp(1rem, 4vw, 3rem);

  /* --------------------------------------------------------------- FORMA */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-full: 999px;

  /* Sombras discretas: en diseño editorial la jerarquía la da el filete,
     no la sombra. Se usan sólo en capas flotantes. */
  --sh-1: 0 1px 2px rgba(14, 15, 18, 0.06);
  --sh-2: 0 4px 12px rgba(14, 15, 18, 0.08);
  --sh-3: 0 12px 32px rgba(14, 15, 18, 0.12);
  --sh-4: 0 24px 64px rgba(14, 15, 18, 0.18);

  /* ----------------------------------------------------------- MOVIMIENTO */
  --ms-rapido: 120ms;
  --ms-medio: 220ms;
  --ms-lento: 420ms;
  --ms-vuelta: 650ms;
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-entrada: cubic-bezier(0.4, 0, 1, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------------ CAPAS */
  --z-base: 1;
  --z-sticky: 100;
  --z-cabecera: 200;
  --z-menu: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-aviso: 600;
}

/* ------------------------------------------------------------ MODO OSCURO
   No es una inversión: se recalibra el papel a "tinta nocturna" y se
   sube la luminosidad del rojo para mantener contraste AA sobre oscuro. */
[data-tema='oscuro'] {
  --fondo: #0f1013;
  --fondo-elevado: #171a1f;
  --fondo-alterno: #1d2127;
  --texto: #f2f0ec;
  --texto-2: #b8bcc4;
  --texto-3: #8b8f98;
  --linea: #2b2f36;
  --linea-fuerte: #3d434c;
  --acento: #ff4b56;
  --c-rojo: #ff4b56;
  --c-azul-per: #6d97ff;
  --c-dorado: #e8cf7a;
  --s-noticias: #ff4b56;
  --s-comunicados: #6d97ff;
  --s-periodico: #e8cf7a;
  --s-eventos: #35b37e;
  --s-capacitacion: #b18cf0;
  --s-documentos: #a6a9b2;
  --s-deportes: #ff8a4c;
  --s-multimedia: #38b6cf;
  --s-salones: #f2568e;
  --s-directorio: #8fa9e8;
  --s-asesoria: #d9a066;
  --c-exito-bg: #10281d;
  --c-alerta-bg: #2b2110;
  --c-error-bg: #2c1414;
  --c-info-bg: #131c2e;
  --sh-2: 0 4px 12px rgba(0, 0, 0, 0.4);
  --sh-3: 0 12px 32px rgba(0, 0, 0, 0.5);
  --sh-4: 0 24px 64px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Escalado de lectura para audiencia con presbicia (base sindical adulta) */
[data-lectura='comodo'] { --escala-lectura: 1.125; }
[data-lectura='amplio'] { --escala-lectura: 1.28; }