/* ============================================================================
   BRAND.CSS - Sistema de Colores HydroSynapse
   Versión técnica con paleta corporativa e indicadores de estado
   ============================================================================ */

:root {
  /* =========================================================================
     7.1 COLORES PRIMARIOS (Estructura)
     Uso: Fondos, headers, estructura y elementos base del diseño
     ========================================================================= */
  
  --color-primary-deep-blue: #0F2A44;    /* Azul Técnico Profundo */
  --color-primary-graphite: #2B2B2B;    /* Grafito Técnico */
  --color-primary-white: #F5F7FA;       /* Blanco Técnico */

  /* Aliases para mejor legibilidad en contextos específicos */
  --bg-primary: var(--color-primary-deep-blue);
  --text-primary: var(--color-primary-graphite);
  --bg-secondary: var(--color-primary-white);

  /* =========================================================================
     7.2 COLORES DE PROCESO (Acento)
     Uso: KPIs, nodos, énfasis
     Recomendación: Máximo ≤ 15% del área visual
     ========================================================================= */
  
  --color-accent-copper: #B87333;       /* Cobre Industrial */
  --accent-primary: var(--color-accent-copper);

  /* =========================================================================
     7.3 COLORES FUNCIONALES (Estado del Proceso)
     Uso: Indicadores de estado en sistemas y procesos
     ========================================================================= */
  
  --color-state-success: #2E7D6F;       /* Verde Proceso - Operación estable */
  --color-state-warning: #C9A227;       /* Ámbar Técnico - Alerta/desviación */
  --color-state-error: #8C1D18;         /* Rojo Diagnóstico - Pérdida/riesgo */

  /* Aliases para mejor contexto de uso */
  --state-stable: var(--color-state-success);
  --state-alert: var(--color-state-warning);
  --state-risk: var(--color-state-error);
}

/* ============================================================================
   APLICACIÓN BASE DE ESTILOS CON PALETA DE MARCA
   ============================================================================ */

body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bg-primary);
}

/* ============================================================================
   UTILIDADES DE COLOR
   ============================================================================ */

/* Fondos */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-accent { background-color: var(--accent-primary); }

/* Textos */
.text-primary { color: var(--text-primary); }
.text-white { color: var(--color-primary-white); }
.text-accent { color: var(--accent-primary); }

/* Estados */
.text-success { color: var(--state-stable); }
.text-warning { color: var(--state-alert); }
.text-error { color: var(--state-risk); }

.bg-success { background-color: var(--state-stable); }
.bg-warning { background-color: var(--state-alert); }
.bg-error { background-color: var(--state-risk); }

/* Bordes */
.border-primary { border-color: var(--bg-primary); }
.border-accent { border-color: var(--accent-primary); }
.border-success { border-color: var(--state-stable); }
.border-warning { border-color: var(--state-alert); }
.border-error { border-color: var(--state-risk); }

/* ============================================================================
   8. SISTEMA TIPOGRÁFICO TÉCNICO
   Tipografía instrumental y normativa para lectura técnica, datos y dashboards
   ============================================================================ */

/* =========================================================================
   8.1 TIPOGRAFÍAS OFICIALES
   ========================================================================= */

/* Importación de tipografías */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* Tipografía primaria: Inter (Sans serif técnica) */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Tipografía secundaria: JetBrains Mono (Monoespaciada técnica) */
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* =========================================================================
     Pesos normalizados - Tipografía primaria (Inter)
     ========================================================================= */
  
  --font-weight-regular: 400;      /* Texto cuerpo */
  --font-weight-medium: 500;       /* Subtítulos / captions */
  --font-weight-semibold: 600;     /* Títulos de sección */
  --font-weight-bold: 700;         /* Énfasis técnico y KPIs */

  /* =========================================================================
     8.2 JERARQUÍA TIPOGRÁFICA NORMALIZADA
     Tamaños relativos (multiplicadores de tamaño base)
     ========================================================================= */
  
  /* Tamaño base: 1rem (16px típicamente) */
  --font-size-base: 1rem;
  
  /* Escala tipográfica */
  --font-size-body: var(--font-size-base);           /* 1.0× */
  --font-size-table: calc(var(--font-size-base) * 0.95);  /* 0.95× */
  --font-size-subtitle: calc(var(--font-size-base) * 1.4); /* 1.4× */
  --font-size-title: calc(var(--font-size-base) * 1.8);    /* 1.8× */
  --font-size-kpi: var(--font-size-base);            /* 1.0× (mono) */
}

/* Aplicación de tipografía primaria */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
}

/* =========================================================================
   CLASES PARA ELEMENTOS TIPOGRÁFICOS
   ========================================================================= */

/* Títulos */
.title-report {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-title);
  color: var(--bg-primary);
  line-height: 1.2;
}

.title-report-prominent {
  font-weight: var(--font-weight-bold);
}

/* Subtítulos */
.subtitle {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-subtitle);
  color: var(--bg-primary);
  line-height: 1.35;
}

/* Texto cuerpo */
.body-text {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  color: var(--text-primary);
  line-height: 1.6;
}

/* Tablas */
.table-text {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-table);
  color: var(--text-primary);
  line-height: 1.5;
}

table {
  font-family: var(--font-primary);
  font-size: var(--font-size-table);
}

/* KPIs y Variables */
.kpi,
.variable,
.code-inline {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-kpi);
  color: var(--accent-primary);
  letter-spacing: 0.02em;
}

/* Código o pseudocódigo */
.code-block,
code,
pre {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.5;
}

code {
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

/* Identificadores de muestras */
.sample-id {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-kpi);
  color: var(--bg-primary);
}

/* Énfasis técnico */
.emphasis-technical {
  font-weight: var(--font-weight-bold);
  color: var(--accent-primary);
}