/* ============================================================
   India Weather Stack — Color System
   ------------------------------------------------------------
   The palette reads the planet from orbit downward:
   deep space → atmosphere blue → radar cyan → the warm land of
   India, plus a meteorological reflectivity scale for weather
   data. Dark-first, because IWS lives on the night side of the
   satellite view.
   ============================================================ */

:root {
  /* ---- Space / Atmosphere neutrals (dark → light) ---- */
  --iws-space-950: #050B16;   /* deepest space — page base */
  --iws-space-900: #0A1628;   /* primary dark surface (logo bg) */
  --iws-space-850: #0C1B30;
  --iws-space-800: #0F2238;   /* raised surface */
  --iws-space-700: #16304C;   /* hover surface / lines */
  --iws-space-600: #21425F;
  --iws-space-500: #335874;

  --iws-slate-400: #5E7793;   /* muted text on dark */
  --iws-slate-300: #8FA4BC;   /* secondary text on dark */
  --iws-slate-200: #BFCEDD;
  --iws-slate-100: #E2EAF2;   /* primary text on dark */
  --iws-slate-50:  #F2F6FA;   /* near-white */
  --iws-white:     #FFFFFF;

  /* ---- Sky / Ocean / Satellite blue (brand primary) ---- */
  --iws-blue-700: #0F3A6B;
  --iws-blue-600: #1A5DAE;
  --iws-blue-500: #2E7CD6;    /* PRIMARY brand blue */
  --iws-blue-400: #4F9BEC;
  --iws-blue-300: #84BCF7;
  --iws-blue-200: #BBD9FB;

  /* ---- Radar / Sensor cyan (live signal, accents) ---- */
  --iws-cyan-700: #0A6E78;
  --iws-cyan-600: #0E9AA8;
  --iws-cyan-500: #18C3CE;    /* ACCENT — radar sweep / live data */
  --iws-cyan-400: #3FDDE3;
  --iws-cyan-300: #7CECEF;

  /* ---- India land / monsoon (warm earth) ---- */
  --iws-land-700: #8A4A1E;
  --iws-land-600: #B8632A;
  --iws-land-500: #E08A3C;    /* terracotta plains / seasonal */
  --iws-land-400: #EFA862;
  --iws-monsoon-600: #1F7E54;
  --iws-monsoon-500: #2F9E6B; /* monsoon vegetation green */
  --iws-monsoon-400: #46BE86;

  /* ---- Weather reflectivity scale (radar dBZ-inspired) ----
     light rain → moderate → heavy → storm → severe → extreme   */
  --wx-rain-light: #3DBE6A;
  --wx-rain-mod:   #8DD13F;
  --wx-rain-heavy: #F2C53D;
  --wx-storm:      #F2853D;
  --wx-severe:     #E5484D;
  --wx-extreme:    #B14FE0;   /* cyclone core / hail */

  /* ---- Status ---- */
  --iws-success: #2F9E6B;
  --iws-warning: #F2A93D;
  --iws-danger:  #E5484D;
  --iws-info:    #2E7CD6;

  /* ============================================================
     SEMANTIC ALIASES (dark theme — the IWS default)
     ============================================================ */
  --color-bg:            var(--iws-space-950);
  --color-bg-grad-top:   #0B1A30;
  --color-bg-grad-btm:   #050B16;
  --surface-base:        var(--iws-space-900);
  --surface-raised:      var(--iws-space-800);
  --surface-overlay:     rgba(15, 34, 56, 0.72);
  --surface-card:        rgba(15, 34, 56, 0.55);
  --surface-hover:       var(--iws-space-700);

  --border-subtle:  rgba(143, 164, 188, 0.14);
  --border-default: rgba(143, 164, 188, 0.22);
  --border-strong:  rgba(143, 164, 188, 0.38);
  --border-glow:    rgba(24, 195, 206, 0.45);

  --text-primary:   var(--iws-slate-100);
  --text-secondary: var(--iws-slate-300);
  --text-muted:     var(--iws-slate-400);
  --text-inverse:   var(--iws-space-900);
  --text-on-accent: var(--iws-white);

  --color-primary:        var(--iws-blue-500);
  --color-primary-hover:  var(--iws-blue-400);
  --color-primary-press:  var(--iws-blue-600);
  --color-accent:         var(--iws-cyan-500);
  --color-accent-hover:   var(--iws-cyan-400);
  --color-link:           var(--iws-cyan-400);

  /* ---- Product horizon accents ---- */
  --iws-1-accent: var(--iws-land-500);    /* Seasonal — 6 months */
  --iws-2-accent: var(--iws-blue-500);    /* Day / Week ahead, 4km */
  --iws-3-accent: var(--iws-cyan-500);    /* Nowcast — 4h, 1km */

  --focus-ring: var(--iws-cyan-400);
}

/* ============================================================
   LIGHT SURFACE THEME — for docs, light cards, print
   Apply by adding  data-theme="light"  to a container.
   ============================================================ */
[data-theme="light"] {
  --color-bg:        var(--iws-slate-50);
  --surface-base:    var(--iws-white);
  --surface-raised:  var(--iws-white);
  --surface-overlay: rgba(255, 255, 255, 0.85);
  --surface-card:    var(--iws-white);
  --surface-hover:   var(--iws-slate-100);

  --border-subtle:  rgba(15, 34, 56, 0.08);
  --border-default: rgba(15, 34, 56, 0.14);
  --border-strong:  rgba(15, 34, 56, 0.26);

  --text-primary:   var(--iws-space-900);
  --text-secondary: var(--iws-space-600);
  --text-muted:     var(--iws-slate-400);

  --color-link: var(--iws-blue-600);
}