/* ------------------------------------------------------------------
   tokens.css — design tokens (custom properties) de toda la app.
   Se carga PRIMERO (antes que styles.css) desde layouts/base.php.
   Las custom properties son globales sin importar el archivo u orden
   de carga, así que centralizarlas aquí es seguro y vacía de peso a
   styles.css. Ver [[project_inpescar_app]].
   ------------------------------------------------------------------ */

:root {
  /* ===== Paleta base ===== */
  --color-green: #397843;
  --color-green-light: #e8f5e9;
  --color-blue: #024ab8;
  --color-blue-light: #e3f2fd;
  --color-dark-blue: #00267d;
  --color-purple: #39338a;
  --color-light-gray: #f8fafb;
  --color-white: #ffffff;
  --color-gray-50: #fafbfc;
  --color-gray-100: #f4f6f9;
  --color-gray-200: #e2e6ef;
  --color-gray-300: #c8cedb;
  --color-gray-400: #9aa2b5;
  --color-gray-500: #6b748a;
  --color-gray-600: #4a5266;
  --color-gray-700: #2d3342;
  --color-text: #1a1d26;
  --color-coral: #ff6b6b;
  --color-mint: #a8e6cf;

  /* ===== Tipografía, layout y forma ===== */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --container-max: 1200px;
  /* Altura real del header fijo (antes 72px, lo que desplazaba el
     scroll-padding-top y saltaba el anclaje de secciones). */
  --header-height: 60px;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 32px;
  --radius-pill: 50px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 50px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.15);

  /* ===== Tokens de estado =====
     Antes estos colores estaban hardcodeados (15+ veces) repartidos entre
     app.css, portal.css, admin.css y auth.css. Aquí son única fuente de
     verdad. Un solo ámbar de TEXTO (--color-warn); el acento ámbar vivo
     de KPIs/gráficas vive aparte en --color-warn-strong porque es un rol
     distinto (relleno, no texto sobre fondo claro). */
  --color-success: #1f5b2a;
  --color-success-bg: var(--color-green-light);
  --color-success-border: #b7e0bd;

  --color-error: #9b1c1c;
  --color-error-bg: #fdecec;
  --color-error-border: #f5c2c2;

  --color-warn: #9a5b00;
  --color-warn-bg: #fff3e0;
  --color-warn-border: #ffe0b2;
  --color-warn-strong: #e8a13a;

  --color-info: #0b3d91;
  --color-info-bg: var(--color-blue-light);
  --color-info-border: #b9d4f5;

  /* Hover de marca para .btn--primary (antes #2d5f35 hardcodeado). */
  --color-green-dark: #2d5f35;
}