/* =========================================================
   REPARTO DE AGUA — Design tokens (rediseño 2026)
   Base: colores del logo + minimalismo de app.repartodeagua.com
   + lenguaje "tech" de wat.plus (display grotesk + mono)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Azul Reparto (primario, del logo #135D9E) ---------- */
  --azul-50:  #EEF5FC;
  --azul-100: #D6E7F7;
  --azul-200: #ADCFEF;
  --azul-300: #7AB0E2;
  --azul-400: #4189CC;
  --azul-500: #1F70B8;
  --azul-600: #135D9E; /* marca */
  --azul-700: #114C82;
  --azul-800: #103E69;
  --azul-900: #0E3053;
  --azul-950: #081D33;

  /* ---------- Cian Agua (secundario, del logo #20B9E5) ---------- */
  --cian-50:  #EAF9FD;
  --cian-100: #CDF1FA;
  --cian-200: #9DE3F5;
  --cian-300: #63D2EE;
  --cian-400: #20B9E5; /* marca */
  --cian-500: #109FCB;
  --cian-600: #0C80A6;
  --cian-700: #0E6787;
  --cian-800: #12546D;
  --cian-900: #13465B;
  --cian-950: #072D3D;

  /* ---------- Acento tech (inspirado en wat.plus) ---------- */
  --lima-300: #DDF7A3;
  --lima-400: #C8F26E; /* acento: badges, highlights, "nuevo" */
  --lima-600: #8DB82E;

  /* ---------- Neutros (mismos que la app, para coherencia) ---------- */
  --gris-25:  #FCFCFD;
  --gris-50:  #F9FAFB;
  --gris-100: #F2F4F7;
  --gris-200: #E4E7EC;
  --gris-300: #D0D5DD;
  --gris-400: #98A2B3;
  --gris-500: #667085;
  --gris-600: #475467;
  --gris-700: #344054;
  --gris-800: #1D2939;
  --gris-900: #101828;
  --gris-950: #0C111D;

  --tinta:    #0A1628; /* casi negro azulado: titulares, fondos oscuros */
  --papel:    #F7F9FB; /* fondo frío, alternativa al blanco puro */

  /* ---------- Semánticos ---------- */
  --exito-50:  #ECFDF3;  --exito-500:  #12B76A;  --exito-700:  #027A48;
  --alerta-50: #FFFAEB;  --alerta-500: #F79009;  --alerta-700: #B54708;
  --error-50:  #FEF3F2;  --error-500:  #F04438;  --error-700:  #B42318;
  --info-50:   var(--cian-50); --info-500: var(--cian-500); --info-700: var(--cian-700);

  /* ---------- Roles (tema claro) ---------- */
  --bg:          var(--papel);
  --bg-2:        #FFFFFF;
  --surface:     #FFFFFF;
  --fg:          var(--tinta);
  --fg-muted:    var(--gris-500);
  --line:        var(--gris-200);
  --line-strong: var(--gris-300);
  --primary:     var(--azul-600);
  --primary-hover: var(--azul-700);
  --primary-ink: #FFFFFF;
  --accent:      var(--cian-400);
  --focus-ring:  0 0 0 4px rgb(32 185 229 / .22);

  /* ---------- Tipografía ---------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-h4:   clamp(20px, 1.8vw, 24px);
  --text-h3:   clamp(24px, 2.4vw, 32px);
  --text-h2:   clamp(32px, 4.2vw, 56px);
  --text-h1:   clamp(44px, 6.5vw, 88px);

  /* ---------- Bordes y radios (minimal, estilo app) ---------- */
  --border:     1px solid var(--line);
  --radius-xs:  6px;   /* chips, tags */
  --radius-sm:  8px;   /* inputs, botones chicos */
  --radius-md:  12px;  /* inputs grandes, cards chicas */
  --radius-lg:  16px;  /* cards */
  --radius-xl:  24px;  /* secciones / hero cards */
  --radius-pill: 999px; /* botones CTA */

  /* ---------- Sombras (suaves, casi planas) ---------- */
  --shadow-xs: 0 1px 2px rgb(16 24 40 / .05);
  --shadow-sm: 0 1px 3px rgb(16 24 40 / .10), 0 1px 2px rgb(16 24 40 / .06);
  --shadow-lg: 0 12px 16px -4px rgb(16 24 40 / .08), 0 4px 6px -2px rgb(16 24 40 / .03);

  /* ---------- Espaciado / layout ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --container: 1200px;
}

/* ---------- Tema oscuro ---------- */
[data-theme="dark"] {
  --bg:          #060E1A;
  --bg-2:        #0A1628;
  --surface:     #0E1C30;
  --fg:          #F2F6FA;
  --fg-muted:    #8A97AB;
  --line:        #1B2A40;
  --line-strong: #27384F;
  --primary:     var(--cian-400);
  --primary-hover: var(--cian-300);
  --primary-ink: var(--tinta);
}