/* ============================================================
   India Weather Stack — Effects
   Radii, shadows, glows, blur, gradients, textures.
   ============================================================ */

:root {
  /* ---- Corner radii (precise, instrument-panel feel) ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Elevation (on dark surfaces) ---- */
  --shadow-sm:  0 1px 2px rgba(2, 7, 16, 0.6);
  --shadow-md:  0 6px 18px rgba(2, 7, 16, 0.5);
  --shadow-lg:  0 18px 48px rgba(2, 7, 16, 0.55);
  --shadow-xl:  0 32px 80px rgba(2, 7, 16, 0.62);

  /* ---- Glows (live data / radar / sensor accents) ---- */
  --glow-cyan:  0 0 0 1px rgba(24, 195, 206, 0.4), 0 0 24px rgba(24, 195, 206, 0.28);
  --glow-blue:  0 0 0 1px rgba(46, 124, 214, 0.4), 0 0 28px rgba(46, 124, 214, 0.30);
  --glow-amber: 0 0 0 1px rgba(224, 138, 60, 0.4), 0 0 24px rgba(224, 138, 60, 0.26);
  --glow-soft-cyan: 0 0 40px rgba(24, 195, 206, 0.20);

  /* ---- Blur (atmospheric glass) ---- */
  --blur-sm: blur(8px); /* @kind other */
  --blur-md: blur(16px); /* @kind other */
  --blur-lg: blur(28px); /* @kind other */

  /* ---- Signature gradients ---- */
  --grad-space:      radial-gradient(120% 90% at 50% -10%, #133a66 0%, #0a1628 45%, #050b16 100%); /* @kind color */
  --grad-atmosphere: linear-gradient(180deg, #2e7cd6 0%, #18c3ce 100%); /* @kind color */
  --grad-radar:      conic-gradient(from 0deg, rgba(24,195,206,0) 0deg, rgba(24,195,206,0.55) 320deg, rgba(24,195,206,0) 360deg); /* @kind color */
  --grad-monsoon:    linear-gradient(135deg, #2f9e6b 0%, #18c3ce 100%); /* @kind color */
  --grad-sunrise:    linear-gradient(135deg, #e08a3c 0%, #e5484d 100%); /* @kind color */
  --grad-reflectivity: linear-gradient(90deg,
      #3dbe6a 0%, #8dd13f 22%, #f2c53d 44%,
      #f2853d 64%, #e5484d 82%, #b14fe0 100%); /* @kind color */

  /* protection gradient — fades content into space at edges */
  --grad-scrim-top:    linear-gradient(180deg, rgba(5,11,22,0.9) 0%, rgba(5,11,22,0) 100%); /* @kind color */
  --grad-scrim-bottom: linear-gradient(0deg, rgba(5,11,22,0.95) 0%, rgba(5,11,22,0) 100%); /* @kind color */

  /* ---- Hairline grid / lat-long texture overlay ---- */
  --grid-line: rgba(143, 164, 188, 0.06); /* @kind color */
}

/* Reusable atmospheric-glass surface */
.iws-glass {
  background: var(--surface-overlay);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

/* Lat/long graticule overlay (decorative, scientific) */
.iws-graticule {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}