/* ========================================================================== 
   WeatherPulse neutral app foundation
   Shared by Forecast and Warn Pins. Page-specific layers load after this file.
   ========================================================================== */

body.wp-experience.wp-page-forecast,
body.wp-experience.wp-page-warnpins {
  --ds-page: #f7f6f2;
  --ds-page-deep: #eceae5;
  --ds-ink: #171717;
  --ds-muted: #686868;
  --ds-faint: rgba(0, 0, 0, 0.05);
  --ds-line: rgba(0, 0, 0, 0.11);
  --ds-line-strong: rgba(0, 0, 0, 0.19);
  --ds-paper: rgba(255, 255, 255, 0.96);
  --ds-paper-solid: #ffffff;
  --ds-soft: #f1f0ed;
  --ds-accent: #202020;
  --ds-accent-bright: #505050;
  --ds-good: #16825f;
  --ds-watch: #b87415;
  --ds-alert: #d54a58;
  --ds-shadow: 0 28px 80px rgba(0, 0, 0, 0.13);
  --ds-shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.08);

  /* Keep the legacy component variables in step with the new design. */
  --page-surface: var(--ds-page);
  --bg-app: var(--ds-page);
  --bg-card: var(--ds-paper-solid);
  --bg-overlay: var(--ds-paper-solid);
  --wp-surface-2: var(--ds-soft);
  --input-bg: var(--ds-soft);
  --text-main: var(--ds-ink);
  --text-sub: var(--ds-muted);
  --text-inverse: #ffffff;
  --divider: var(--ds-line);
  --xp-line: var(--ds-line);
  --xp-line-strong: var(--ds-line-strong);
  --xp-accent: var(--ds-accent);
  --xp-accent-strong: var(--ds-accent);
  --xp-accent-soft: var(--ds-faint);
  --xp-accent-glow: rgba(0, 0, 0, 0.12);
  --brand-primary: var(--ds-accent);
  --brand-dark: #000000;
  --shadow: var(--ds-shadow-soft);
  --xp-elev-1: var(--ds-shadow-soft);
  --xp-elev-2: var(--ds-shadow);
  --pill-surface: rgba(255, 255, 255, 0.86);
  --pill-border: rgba(0, 0, 0, 0.1);
  --pill-text: var(--ds-ink);
  --pill-sub: var(--ds-muted);
  --xp-glass: rgba(255, 255, 255, 0.86);
  --xp-glass-border: rgba(0, 0, 0, 0.1);
  --xp-glass-blur: blur(24px) saturate(140%);

  min-width: 0 !important;
  overflow-x: clip !important;
  color: var(--ds-ink) !important;
  background: linear-gradient(180deg, var(--ds-page) 0%, #ffffff 45%, var(--ds-page-deep) 100%) !important;
  color-scheme: light !important;
}

html[data-theme="night"] body.wp-experience.wp-page-forecast,
html[data-theme="night"] body.wp-experience.wp-page-warnpins,
body.wp-experience.wp-page-forecast[data-theme="night"],
body.wp-experience.wp-page-warnpins[data-theme="night"] {
  --ds-page: #050505;
  --ds-page-deep: #0b0b0b;
  --ds-ink: #f5f5f5;
  --ds-muted: #a3a3a3;
  --ds-faint: rgba(255, 255, 255, 0.07);
  --ds-line: rgba(255, 255, 255, 0.12);
  --ds-line-strong: rgba(255, 255, 255, 0.2);
  --ds-paper: rgba(17, 17, 17, 0.96);
  --ds-paper-solid: #111111;
  --ds-soft: #1a1a1a;
  --ds-accent: #f1f1f1;
  --ds-accent-bright: #ffffff;
  --ds-good: #68d9ac;
  --ds-watch: #f2be69;
  --ds-alert: #ff7d89;
  --ds-shadow: 0 28px 82px rgba(0, 0, 0, 0.36);
  --ds-shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.28);
  --text-inverse: #111111;
  --brand-dark: #ffffff;
  --xp-accent-glow: rgba(255, 255, 255, 0.08);
  --pill-surface: rgba(17, 17, 17, 0.88);
  --pill-border: rgba(255, 255, 255, 0.12);
  --xp-glass: rgba(17, 17, 17, 0.88);
  --xp-glass-border: rgba(255, 255, 255, 0.12);
  color: var(--ds-ink) !important;
  background: linear-gradient(180deg, var(--ds-page) 0%, #0d0d0d 50%, var(--ds-page) 100%) !important;
  color-scheme: dark !important;
}

html[data-theme="day"] body.wp-experience.wp-page-forecast,
html[data-theme="day"] body.wp-experience.wp-page-warnpins,
html[data-theme="day"] body.wp-experience.wp-page-forecast #main-scroll,
html[data-theme="day"] body.wp-experience.wp-page-forecast .main-wrapper,
html[data-theme="day"] body.wp-experience.wp-page-forecast .content-backdrop,
html[data-theme="day"] body.wp-experience.wp-page-warnpins .main-wrapper,
html[data-theme="day"] body.wp-experience.wp-page-warnpins .content-backdrop {
  color: #171717 !important;
  background-color: #f7f6f2 !important;
  color-scheme: light !important;
}

html[data-theme="night"] body.wp-experience.wp-page-forecast #main-scroll,
html[data-theme="night"] body.wp-experience.wp-page-forecast .main-wrapper,
html[data-theme="night"] body.wp-experience.wp-page-forecast .content-backdrop,
html[data-theme="night"] body.wp-experience.wp-page-warnpins .main-wrapper,
html[data-theme="night"] body.wp-experience.wp-page-warnpins .content-backdrop {
  color: #f5f5f5 !important;
  background-color: #050505 !important;
  color-scheme: dark !important;
}

body.wp-experience.wp-page-forecast,
body.wp-experience.wp-page-warnpins,
body.wp-experience.wp-page-forecast button,
body.wp-experience.wp-page-forecast input,
body.wp-experience.wp-page-forecast textarea,
body.wp-experience.wp-page-warnpins button,
body.wp-experience.wp-page-warnpins input,
body.wp-experience.wp-page-warnpins textarea {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

body.wp-experience.wp-page-forecast :where(button, a, input, textarea, select, [role="button"]):focus-visible,
body.wp-experience.wp-page-warnpins :where(button, a, input, textarea, select, [role="button"]):focus-visible {
  outline: 2px solid var(--ds-ink) !important;
  outline-offset: 3px !important;
}

body.wp-experience.wp-page-forecast :where(button, [role="button"]),
body.wp-experience.wp-page-warnpins :where(button, [role="button"]) {
  touch-action: manipulation;
}

/* The app dock belongs to the shell; these overrides only neutralize its skin. */
body.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar),
body.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) {
  --wp-shell-nav-surface: rgba(255, 255, 255, 0.9);
  --wp-shell-nav-border: rgba(0, 0, 0, 0.1);
  --wp-shell-nav-shadow: 0 18px 48px rgba(0, 0, 0, 0.14);
  --wp-shell-nav-text: #686868;
  --wp-shell-nav-active-bg: #202020;
  --wp-shell-nav-active-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

html[data-theme="night"] body.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar),
html[data-theme="night"] body.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) {
  --wp-shell-nav-surface: rgba(17, 17, 17, 0.92);
  --wp-shell-nav-border: rgba(255, 255, 255, 0.12);
  --wp-shell-nav-shadow: 0 20px 52px rgba(0, 0, 0, 0.5);
  --wp-shell-nav-text: #a3a3a3;
  --wp-shell-nav-active-bg: #f1f1f1;
  --wp-shell-nav-active-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

body.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar) .wp-shell-dock,
body.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) .wp-shell-dock {
  background: linear-gradient(180deg, transparent 0%, rgba(247, 246, 242, 0.54) 48%, rgba(247, 246, 242, 0.92) 100%) !important;
}

html[data-theme="night"] body.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar) .wp-shell-dock,
html[data-theme="night"] body.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) .wp-shell-dock {
  background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.58) 48%, rgba(5, 5, 5, 0.94) 100%) !important;
}

body.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar) .wp-shell-dock-inner,
body.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) .wp-shell-dock-inner {
  border-color: var(--wp-shell-nav-border) !important;
  background: var(--wp-shell-nav-surface) !important;
  box-shadow: var(--wp-shell-nav-shadow) !important;
}

body.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar) .wp-shell-link.active,
body.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) .wp-shell-link.active,
body.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar) .wp-shell-notify[data-state="enabled"],
body.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) .wp-shell-notify[data-state="enabled"] {
  color: #ffffff !important;
  border-color: transparent !important;
  background: #202020 !important;
  box-shadow: var(--wp-shell-nav-active-shadow) !important;
}

html[data-theme="night"] body.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar) .wp-shell-link.active,
html[data-theme="night"] body.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) .wp-shell-link.active,
html[data-theme="night"] body.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar) .wp-shell-notify[data-state="enabled"],
html[data-theme="night"] body.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) .wp-shell-notify[data-state="enabled"] {
  color: #111111 !important;
  background: #f1f1f1 !important;
}

@media (min-width: 1100px) {
  body.wp-browser-desktop.wp-experience.wp-page-forecast.wp-shell-page:not(.wp-shell-radar) .wp-shell-dock,
  body.wp-browser-desktop.wp-experience.wp-page-warnpins.wp-shell-page:not(.wp-shell-radar) .wp-shell-dock {
    background: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wp-experience.wp-page-forecast *,
  body.wp-experience.wp-page-warnpins * {
    scroll-behavior: auto !important;
  }
}