/* SurroundApps light theme — unified palette across all pages */
html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f8f8f9;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-step: #f0f0f2;
  --bg-deep: #ffffff;

  --border: #e4e4e7;
  --border-strong: #d4d4d8;

  --text: #18181b;
  --text-dim: #52525b;
  --text-faint: #71717a;
  --text-1: #52525b;
  --text-2: rgba(0, 0, 0, 0.55);

  --accent-soft: rgba(232, 177, 74, 0.14);
  --accent-fill: rgba(232, 177, 74, 0.08);
  --accent-glow: rgba(232, 177, 74, 0.12);
  --accent-glow-soft: rgba(232, 177, 74, 0.06);
  --grid-line: rgba(232, 177, 74, 0.1);
  --stripe: rgba(232, 177, 74, 0.08);

  --overlay-from: rgba(255, 255, 255, 0.55);
  --overlay-to: rgba(248, 248, 249, 0.9);

  --risk-low-bg: rgba(63, 125, 63, 0.12);
  --risk-med-bg: rgba(183, 121, 31, 0.12);
  --risk-high-bg: rgba(192, 57, 43, 0.12);

  /* Navigation */
  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(0, 0, 0, 0.06);
  --nav-link: rgba(0, 0, 0, 0.55);
  --nav-link-hover: #0a0a0a;
  --nav-link-active: #0a0a0a;
  --nav-icon: rgba(0, 0, 0, 0.55);
  --nav-icon-hover: #0a0a0a;
  --nav-icon-hover-bg: rgba(0, 0, 0, 0.05);
  --nav-menu-bg: rgba(255, 255, 255, 0.98);
  --nav-menu-border: rgba(0, 0, 0, 0.06);
  --nav-menu-link-hover-bg: rgba(0, 0, 0, 0.04);
  --nav-hamburger: rgba(0, 0, 0, 0.85);
  --nav-hamburger-open-bg: rgba(232, 177, 74, 0.14);
}

html:not([data-theme="light"]) {
  --nav-bg: rgba(10, 10, 10, 0.95);
  --nav-border: rgba(255, 255, 255, 0.05);
  --nav-link: rgba(255, 255, 255, 0.55);
  --nav-link-hover: #ffffff;
  --nav-link-active: #ffffff;
  --nav-icon: rgba(255, 255, 255, 0.55);
  --nav-icon-hover: #ffffff;
  --nav-icon-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-menu-bg: rgba(10, 10, 10, 0.98);
  --nav-menu-border: rgba(255, 255, 255, 0.05);
  --nav-menu-link-hover-bg: rgba(255, 255, 255, 0.04);
  --nav-hamburger: rgba(255, 255, 255, 0.85);
  --nav-hamburger-open-bg: rgba(232, 177, 74, 0.12);
}

/* Inline SVG detail lines adapt in light mode */
html[data-theme="light"] line[stroke="#2a2a30"],
html[data-theme="light"] rect[stroke="#2a2a30"] {
  stroke: #d4d4d8;
}