/* ── 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) */

  /* 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);
}