/* ── Binodia · Colors ─────────────────────────────────────────────
   Dark theme. Page is near-black; surfaces are deep navy; the single
   brand expression is the cyan gradient. Everything else is neutral. */
:root {
  /* Brand accent — the cyan gradient is the ONLY brand color.
     Use sparingly: one gradient moment per view, not everywhere. */
  --accent-start: #38b6ff;
  --accent-end:   #0ea5e9;
  --accent-grad:  linear-gradient(135deg, #38b6ff 0%, #0ea5e9 100%); /* @kind color */
  --accent-shadow: rgba(14, 165, 233, 0.25); /* glow under accent elements */
  --accent-tint:   rgba(56, 182, 255, 0.07); /* faint fill behind accent UI */

  /* Neutral surfaces — three steps of dark */
  --bg-page:  #030712; /* page background, near-black blue */
  --bg-card:  #0b0f19; /* default card / raised surface */
  --bg-card2: #0f172a; /* alternate card, one notch lighter (e.g. services) */
  --bg-elev:  #1e293b; /* highest elevation / avatar fallback */

  /* Text — descending emphasis */
  --text-primary: #f8fafc; /* headings, key copy */
  --text-body:    #cbd5e1; /* body paragraphs */
  --text-muted:   #8894a6; /* captions, meta, placeholders (WCAG-AA safe) */
  --logo-b:       #f8fafc; /* Color de la B del logo — blanca en dark */

  /* Borders — hairlines built from white at low alpha */
  --border:       rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(56, 182, 255, 0.30); /* highlighted surface edge */

  /* Channel / semantic */
  --whatsapp:       #25d366; /* WhatsApp CTA — the one non-cyan accent */
  --whatsapp-tint:  rgba(37, 211, 102, 0.07);
  --whatsapp-edge:  rgba(37, 211, 102, 0.22);
  --danger:  #f87171; /* form errors */
  --success: #38b6ff; /* success states reuse the accent */

  /* ── Semantic aliases — prefer these in components ── */
  --surface:        var(--bg-card);
  --surface-alt:    var(--bg-card2);
  --surface-accent: var(--accent-tint);
  --on-accent:      var(--bg-page); /* text/icon sitting on the gradient */
  --focus-ring:     rgba(56, 182, 255, 0.14);

  /* Rellenos tenues adaptativos — blancos translúcidos en dark, se invierten en light.
     Para chips, pills, placeholders, avatares fallback, botones fantasma. */
  --fill-subtle: rgba(255,255,255,0.05); /* superficie muy tenue */
  --fill-soft:   rgba(255,255,255,0.09); /* superficie media */
}

/* ── Light Theme ──────────────────────────────────────────────────
   Solo se sobrescriben fondos, textos y bordes. El cyan (--accent-*),
   WhatsApp, danger/success y los aliases semánticos se heredan del dark. */
:root[data-theme="light"] {
  /* Fondos — tonos claros muy limpios */
  --bg-page:  #f8fafc;
  --bg-card:  #ffffff;
  --bg-card2: #f1f5f9;
  --bg-elev:  #ffffff;

  /* Textos — grises oscuros */
  --text-primary: #0f172a;
  --text-body:    #334155;
  --text-muted:   #64748b;
  --logo-b:       #030712; /* B del logo en azul ultra oscuro (el fondo del dark) */

  /* El cyan no cambia con el tema → el texto sobre el gradiente sigue oscuro y legible. */
  --on-accent:    #030712;

  /* Bordes — base oscura con opacidad */
  --border:       rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.16);
  --border-accent: rgba(14, 165, 233, 0.35); /* el cyan se mantiene */

  /* Rellenos tenues — versión clara (negro translúcido sobre fondos claros) */
  --fill-subtle: rgba(15,23,42,0.05);
  --fill-soft:   rgba(15,23,42,0.09);
}