/* ============================================
   Home Wealth Watch – Brand Design System
   Dark-first: all components assume dark default
   ============================================ */

:root {
  /* ── Brand palette (constant) ── */
  --hww-ink: #0B0F14;
  --hww-navy: #0B2C4A;
  --hww-blue-700: #0E5A8A;
  --hww-blue-500: #1D8ECF;
  --hww-sky: #57B6F1;
  --hww-gold-600: #B8872B;
  --hww-gold-500: #D4A72C;
  --hww-green-600: #2E7D32;
  --hww-green-500: #36A34A;

  /* ── Dark Mode (Default) ── */
  --bg: #0B0F14;
  --bg-secondary: #111825;
  --surface: #111825;
  --surface-hover: #192231;
  --text-primary: #F2F5F9;
  --text-secondary: #A7B3C2;
  --text-muted: #6B7A8D;
  --border: #1E2D3D;
  --border-subtle: rgba(87, 182, 241, 0.1);
  --primary: #57B6F1;
  --primary-hover: #7FC9FF;
  --accent: #F0C44D;
  --accent-hover: #FFD966;
  --success: #36A34A;
  --success-hover: #3FBF56;
  --success-dark: #2E7D32;

  /* Semantic aliases */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-border: var(--border);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);

  /* Component tokens */
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-hover-bg: rgba(255, 255, 255, 0.07);
  --card-hover-border: rgba(54, 163, 74, 0.3);
  --nav-bg: rgba(11, 15, 20, 0.95);
  --nav-border: rgba(87, 182, 241, 0.12);
  --hero-gradient: linear-gradient(160deg, #050a14 0%, #0a1a30 40%, #081220 100%);
  --section-divider: rgba(255, 255, 255, 0.06);
  --btn-secondary-border: rgba(255, 255, 255, 0.15);
  --btn-secondary-color: #e0e6f2;
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.05);
}

/* ── Explicit data-theme="dark" (matches :root) ── */
[data-theme="dark"] {
  --bg: #0B0F14;
  --bg-secondary: #111825;
  --surface: #111825;
  --surface-hover: #192231;
  --text-primary: #F2F5F9;
  --text-secondary: #A7B3C2;
  --text-muted: #6B7A8D;
  --border: #1E2D3D;
  --border-subtle: rgba(87, 182, 241, 0.1);
  --primary: #57B6F1;
  --primary-hover: #7FC9FF;
  --accent: #F0C44D;
  --accent-hover: #FFD966;
  --success: #36A34A;
  --success-hover: #3FBF56;
  --success-dark: #2E7D32;

  --color-bg: #0B0F14;
  --color-surface: #111825;
  --color-border: #1E2D3D;
  --color-text: #F2F5F9;
  --color-text-muted: #A7B3C2;

  --card-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-hover-bg: rgba(255, 255, 255, 0.07);
  --card-hover-border: rgba(54, 163, 74, 0.3);
  --nav-bg: rgba(11, 15, 20, 0.95);
  --nav-border: rgba(87, 182, 241, 0.12);
  --hero-gradient: linear-gradient(160deg, #050a14 0%, #0a1a30 40%, #081220 100%);
  --section-divider: rgba(255, 255, 255, 0.06);
  --btn-secondary-border: rgba(255, 255, 255, 0.15);
  --btn-secondary-color: #e0e6f2;
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.05);
}

/* ── Light Mode ── */
[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-secondary: #F6F8FB;
  --surface: #F6F8FB;
  --surface-hover: #EEF2F7;
  --text-primary: #0B0F14;
  --text-secondary: #5C6B7A;
  --text-muted: #8896A6;
  --border: #E4E9F0;
  --border-subtle: rgba(14, 90, 138, 0.08);
  --primary: #0E5A8A;
  --primary-hover: #0B4870;
  --accent: #D4A72C;
  --accent-hover: #B8872B;
  --success: #36A34A;
  --success-hover: #2E7D32;
  --success-dark: #2E7D32;

  --color-bg: #FFFFFF;
  --color-surface: #F6F8FB;
  --color-border: #E4E9F0;
  --color-text: #0B0F14;
  --color-text-muted: #5C6B7A;

  --card-bg: rgba(0, 0, 0, 0.02);
  --card-border: #E4E9F0;
  --card-hover-bg: #FFFFFF;
  --card-hover-border: rgba(54, 163, 74, 0.4);
  --nav-bg: rgba(255, 255, 255, 0.98);
  --nav-border: rgba(0, 0, 0, 0.12);
  --hero-gradient: linear-gradient(160deg, #f8fafb 0%, #eef3f8 40%, #f4f7fa 100%);
  --section-divider: rgba(0, 0, 0, 0.06);
  --btn-secondary-border: rgba(0, 0, 0, 0.15);
  --btn-secondary-color: #2d3748;
  --btn-secondary-hover-bg: rgba(0, 0, 0, 0.04);
}

/* Sync Bootstrap theme toggle with brand light tokens */
[data-bs-theme="light"] {
  --bg: #FFFFFF;
  --bg-secondary: #F6F8FB;
  --surface: #F6F8FB;
  --surface-hover: #EEF2F7;
  --text-primary: #0B0F14;
  --text-secondary: #5C6B7A;
  --text-muted: #8896A6;
  --border: #E4E9F0;
  --border-subtle: rgba(14, 90, 138, 0.08);
  --primary: #0E5A8A;
  --primary-hover: #0B4870;
  --accent: #D4A72C;
  --accent-hover: #B8872B;
  --success: #36A34A;
  --success-hover: #2E7D32;
  --success-dark: #2E7D32;

  --color-bg: #FFFFFF;
  --color-surface: #F6F8FB;
  --color-border: #E4E9F0;
  --color-text: #0B0F14;
  --color-text-muted: #5C6B7A;

  --card-bg: rgba(0, 0, 0, 0.02);
  --card-border: #E4E9F0;
  --card-hover-bg: #FFFFFF;
  --card-hover-border: rgba(54, 163, 74, 0.4);
  --nav-bg: rgba(255, 255, 255, 0.98);
  --nav-border: rgba(0, 0, 0, 0.12);
  --hero-gradient: linear-gradient(160deg, #f8fafb 0%, #eef3f8 40%, #f4f7fa 100%);
  --section-divider: rgba(0, 0, 0, 0.06);
  --btn-secondary-border: rgba(0, 0, 0, 0.15);
  --btn-secondary-color: #2d3748;
  --btn-secondary-hover-bg: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FFFFFF;
    --bg-secondary: #F6F8FB;
    --surface: #F6F8FB;
    --surface-hover: #EEF2F7;
    --text-primary: #0B0F14;
    --text-secondary: #5C6B7A;
    --text-muted: #8896A6;
    --border: #E4E9F0;
    --border-subtle: rgba(14, 90, 138, 0.08);
    --primary: #0E5A8A;
    --primary-hover: #0B4870;
    --accent: #D4A72C;
    --accent-hover: #B8872B;
    --success: #36A34A;
    --success-hover: #2E7D32;
    --success-dark: #2E7D32;

    --color-bg: #FFFFFF;
    --color-surface: #F6F8FB;
    --color-border: #E4E9F0;
    --color-text: #0B0F14;
    --color-text-muted: #5C6B7A;

    --card-bg: rgba(0, 0, 0, 0.02);
    --card-border: #E4E9F0;
    --card-hover-bg: #FFFFFF;
    --card-hover-border: rgba(54, 163, 74, 0.4);
    --nav-bg: rgba(255, 255, 255, 0.97);
    --nav-border: rgba(0, 0, 0, 0.08);
    --hero-gradient: linear-gradient(160deg, #f8fafb 0%, #eef3f8 40%, #f4f7fa 100%);
    --section-divider: rgba(0, 0, 0, 0.06);
    --btn-secondary-border: rgba(0, 0, 0, 0.15);
    --btn-secondary-color: #2d3748;
    --btn-secondary-hover-bg: rgba(0, 0, 0, 0.04);
  }
}

/* ── Bootstrap Theme Integration ── */
/* Map brand tokens to Bootstrap's CSS variable system */
:root,
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-tertiary-bg: var(--surface);
  --bs-border-color: var(--border);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
  --bs-emphasis-color: var(--text-primary);
}

[data-bs-theme="light"] {
  --bs-body-bg: #FFFFFF;
  --bs-body-color: #0B0F14;
  --bs-secondary-color: #5C6B7A;
  --bs-tertiary-color: #8896A6;
  --bs-tertiary-bg: #F6F8FB;
  --bs-border-color: #E4E9F0;
  --bs-link-color: #0E5A8A;
  --bs-link-hover-color: #0B4870;
  --bs-emphasis-color: #0B0F14;
}

/* ── Base element styles ── */
html {
  background-color: var(--bg);
  color: var(--text-primary);
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  margin: 0;
}

/* Smooth theme transitions */
html, body, .theme-aware {
  transition: background-color 0.3s ease, color 0.3s ease;
}