/* ==========================================================================
   SumaGas — Variables de diseño

   Unico lugar donde se declaran colores, tipografias, espaciados, radios y
   sombras. Ninguna hoja de estilo escribe un color suelto: todas consultan
   estas variables.

   Esto permite ajustar la paleta completa del sitio editando este archivo,
   sin recorrer el resto del codigo — relevante mientras el manual de marca
   se termina de definir.
   ========================================================================== */

:root {
  /* Marca — turquesa tomado del logo oficial (#1AB6BE) */
  --brand-050: #eefafb;
  --brand-100: #d3f1f3;
  --brand-200: #a8e4e8;
  --brand-300: #6ed2d8;
  --brand-400: #1ab6be;
  --brand-500: #12a0a8;
  --brand-600: #0e838a;
  --brand-700: #0c6a70;

  /* Azul profundo industrial — texto y secciones oscuras */
  --ink-900: #0b1f26;
  --ink-800: #12303a;
  --ink-700: #1e4552;
  --ink-600: #3a5f6d;
  --ink-500: #5c7a86;
  --ink-400: #8199a3;
  --ink-300: #aebdc4;

  /* Superficies y líneas */
  --surface: #ffffff;
  --surface-2: #f5f9fa;
  --surface-3: #eaf1f3;
  --line: #dde7ea;
  --line-strong: #c3d4d9;

  /* Estados */
  --flame: #f08a1d;         /* acento cálido "el calor de la llama", uso puntual */
  --flame-soft: #fff3e3;
  --ok: #157f47;
  --ok-soft: #e8f6ee;
  --warn: #9a6400;
  --warn-soft: #fff6e0;
  --danger: #b3261e;
  --danger-soft: #fdeceb;

  /* Gas dentro del dibujo del tanque, segun el nivel (definidos por SumaGas) */
  --nivel-medio: #f59c27;
  --nivel-critico: #ff0000;

  /* Tipografía */
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala de espacio */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radios y sombras */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(11, 31, 38, .06), 0 1px 3px rgba(11, 31, 38, .04);
  --sh-2: 0 2px 4px rgba(11, 31, 38, .05), 0 6px 16px rgba(11, 31, 38, .07);
  --sh-3: 0 8px 24px rgba(11, 31, 38, .10), 0 2px 6px rgba(11, 31, 38, .05);

  --container: 1180px;
  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}