/**
 * SismoRed - Design Tokens
 * Extraídos con exactitud de SismoRed Landing.dc.html y SismoRed Rediseño.dc.html
 */

:root {
  /* ═══ PALETA OFICIAL EXACTA ═══ */
  --color-bg: #050708;             /* Fondo OLED negro puro (en reposo) */
  --color-panel: #0D1113;          /* Panel primario / tarjetas */
  --color-panel-2: #161B1F;        /* Panel secundario / contenedor interior */
  
  /* Líneas y bordes */
  --color-border: #1E252A;         /* Línea hairline oficial (1px) */
  --color-border-subtle: #12171A;  /* Separador de sección */
  --color-border-hover: #2A3238;   /* Borde secundario / chips */
  --color-border-focus: #4A545C;   /* Hover de borde secundario */
  --color-border-legal-hover: #3A434A;

  /* Colores de instrumentos y alertas */
  --color-alarm: #E53035;          /* Rojo alarma institucional */
  --color-alarm-hover: #FF4247;    /* Rojo botón hover oficial */
  --color-alarm-subtle: #FF5A5E;   /* Rojo hover en enlaces */
  --color-alarm-soft: #FF7B7E;     /* Texto suave EMITIENDO */
  --color-alarm-border: rgba(229, 48, 53, 0.32);
  --color-alarm-bg: rgba(229, 48, 53, 0.06);

  --color-verified: #90CA50;       /* Verde activo / verificado */
  --color-verified-dim: rgba(144, 202, 80, 0.45);
  --color-uncalibrated: #F0A02A;   /* Ámbar advertencia */

  /* Tipografías y texto */
  --color-text-primary: #E8EBED;   /* Título / texto primario */
  --color-text-white: #FFFFFF;     /* Blanco puro */
  --color-text-body: #BCC3C9;      /* Cuerpo de texto oficial */
  --color-text-muted: #7C858D;     /* Etiquetas mono y subtítulos */
  --color-text-dim: #5C666E;       /* Metadatos y badges */

  /* Familias tipográficas */
  --font-display: 'Saira Condensed', system-ui, -apple-system, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Anchos de layout */
  --max-width-content: 1180px;
  --max-width-legal: 1120px;

  /* Radios de borde según SismoRed Landing.dc.html */
  --radius-btn: 4px;
  --radius-btn-nav: 3px;
  --radius-card: 8px;
  --radius-legal-card: 6px;
  --radius-full: 999px;
}