/**
 * wxmap.io site-wide dark theme — aligned with PredictCast brand.
 * Green/orange kept as accents; body/headings/links use white & soft grey.
 * Include before page-specific <style> blocks.
 */
:root {
  --wx-bg: #050807;
  --wx-bg-deep: #030504;
  --wx-bg-elevated: #0c1210;
  --wx-bg-card: #111916;
  --wx-bg-card-hover: #152019;
  --wx-bg-input: #0a0f0c;

  /* Soft accents — CTAs, borders, badges */
  --wx-green: #5ecf9a;
  --wx-green-core: #3db87a;
  --wx-green-dark: #2a6b52;
  --wx-green-glow: rgba(94, 207, 154, 0.07);

  --wx-orange: #c9956a;
  --wx-orange-bright: #d4a87a;
  --wx-orange-glow: rgba(201, 149, 106, 0.07);

  /* Accent pops — green for most CTAs; orange only for one extreme headline */
  --wx-green-neon: #00e676;
  --wx-orange-neon: #e8a05c;
  --wx-orange-hot: #d4894a;

  /* Primary text ladder: white → soft grey */
  --wx-text: #f0f3f1;
  --wx-text-secondary: #b8c4bc;
  --wx-text-muted: #8a968e;
  --wx-text-inverse: #050807;
  --wx-heading: #f0f3f1;

  --wx-border: #1e2e24;
  --wx-border-strong: #2a4034;
  --wx-border-accent: #3db87a;

  /* Links read as soft grey; hover brightens to white */
  --wx-link: #c8d4cc;
  --wx-link-hover: #f0f3f1;

  --wx-warn: #d4a87a;
  --wx-error: #ff5252;
  --wx-success: #5ecf9a;
  --wx-running: #8fd9b8;

  /* Legacy aliases used by many pages for brand/headings → light text */
  --wx-blue: #f0f3f1;
  --wx-blue-light: #b8c4bc;

  --wx-headline-bg: var(--wx-bg-card);
  --wx-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

  --wx-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --wx-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wx-radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--wx-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--wx-text);
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, var(--wx-green-glow), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, var(--wx-orange-glow), transparent 50%),
    linear-gradient(180deg, var(--wx-bg-deep) 0%, var(--wx-bg) 40%, #07110c 100%);
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

a { color: var(--wx-link); }
a:hover { color: var(--wx-link-hover); }

h1, h2, h3 {
  color: var(--wx-heading);
}

::selection {
  background: rgba(61, 184, 122, 0.35);
  color: #fff;
}

input, select, textarea {
  background: var(--wx-bg-input);
  color: var(--wx-text);
  border: 1px solid var(--wx-border);
  border-radius: 6px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--wx-green-core);
  box-shadow: 0 0 0 2px rgba(61, 184, 122, 0.2);
}

button {
  font-family: inherit;
}

table {
  border-collapse: collapse;
}

th {
  color: var(--wx-text-muted);
  font-weight: 650;
  text-align: left;
}

td {
  border-bottom: 1px solid var(--wx-border);
}

code {
  background: var(--wx-bg-input);
  border: 1px solid var(--wx-border);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--wx-text-secondary);
  font-family: var(--wx-mono);
}

/* Attention accents: extreme weather titles / CTAs that should catch the eye */
.wx-text-extreme,
.wx-title-extreme {
  color: var(--wx-orange-neon) !important;
}
.wx-text-attention,
.wx-title-attention {
  color: var(--wx-green-neon) !important;
}
a.wx-text-extreme:hover,
a.wx-title-extreme:hover {
  color: var(--wx-orange-hot) !important;
}
a.wx-text-attention:hover,
a.wx-title-attention:hover {
  color: #69f0ae !important;
}