/* NL Grants Intelligence - Material Design 3 Inspired Theme System */

/* ============================================
   DESIGN TOKENS
   Following Google Material Design 3 patterns:
   - System preference detection
   - Manual override via data-theme attribute
   - CSS custom properties for all color values
   - 5-level surface elevation system
   ============================================ */

:root {
  /* Brand accent */
  --accent: #F8D264;
  --accent-dim: #c4a44e;
  --accent-container: #3a3010;
  --on-accent: #000000;

  /* Semantic colors (same in both themes) */
  --green: #4ade80;
  --green-container: #0f2a0f;
  --green-border: #1a4a1a;
  --red: #fb7185;
  --red-container: #1a0a0a;
  --red-border: #3a1a1a;
  --blue: #60a5fa;
  --blue-container: #0f1a2a;
  --blue-border: #1a2a4a;
  --purple: #c084fc;
  --purple-container: #1a0f2a;
  --purple-border: #2a1a4a;
  --yellow: #fbbf24;
  --yellow-container: #1a1a0a;
  --yellow-border: #3a3a1a;
  --teal: #2dd4bf;
  --teal-container: #0a1a1a;
}

/* ============================================
   DARK THEME (default)
   ============================================ */
:root,
[data-theme="dark"] {
  --bg: #050508;
  --surface-dim: #0a0a10;
  --surface: #0c0c14;
  --surface-container: #111118;
  --surface-high: #1a1a24;
  --surface-highest: #242430;

  --on-bg: #e6e1e5;
  --on-surface: #e6e1e5;
  --on-surface-variant: #cac7d0;
  --on-surface-muted: #8a8690;
  --on-surface-faint: #555060;

  --outline: #49454f;
  --outline-variant: #2a2a36;

  --nav-bg: rgba(5,5,8,0.92);
  --card-shadow: 0 2px 20px rgba(0,0,0,0.4);
  --card-shadow-hover: 0 4px 30px rgba(0,0,0,0.6);

  --toggle-icon: "☀️";
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] {
  --bg: #fafafa;
  --surface-dim: #f2f2f5;
  --surface: #ffffff;
  --surface-container: #f5f5f8;
  --surface-high: #eeeef2;
  --surface-highest: #e4e4ea;

  --on-bg: #1c1b1f;
  --on-surface: #1c1b1f;
  --on-surface-variant: #49454e;
  --on-surface-muted: #79747e;
  --on-surface-faint: #aeaaB4;

  --outline: #c4c7c5;
  --outline-variant: #e0e0e4;

  --nav-bg: rgba(250,250,250,0.92);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 2px 8px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);

  --accent: #b8920a;
  --accent-dim: #8a6e08;
  --accent-container: #fef3c7;
  --on-accent: #ffffff;

  --green: #16a34a;
  --green-container: #dcfce7;
  --green-border: #bbf7d0;
  --red: #dc2626;
  --red-container: #fee2e2;
  --red-border: #fecaca;
  --blue: #2563eb;
  --blue-container: #dbeafe;
  --blue-border: #bfdbfe;
  --purple: #7c3aed;
  --purple-container: #ede9fe;
  --purple-border: #ddd6fe;
  --yellow: #ca8a04;
  --yellow-container: #fef9c3;
  --yellow-border: #fef08a;
  --teal: #0d9488;
  --teal-container: #ccfbf1;

  --toggle-icon: "🌙";
}

/* System preference: auto-switch if no manual override */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #fafafa;
    --surface-dim: #f2f2f5;
    --surface: #ffffff;
    --surface-container: #f5f5f8;
    --surface-high: #eeeef2;
    --surface-highest: #e4e4ea;

    --on-bg: #1c1b1f;
    --on-surface: #1c1b1f;
    --on-surface-variant: #49454e;
    --on-surface-muted: #79747e;
    --on-surface-faint: #aeaaB4;

    --outline: #c4c7c5;
    --outline-variant: #e0e0e4;

    --nav-bg: rgba(250,250,250,0.92);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 2px 8px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);

    --accent: #b8920a;
    --accent-dim: #8a6e08;
    --accent-container: #fef3c7;
    --on-accent: #ffffff;

    --green: #16a34a;
    --green-container: #dcfce7;
    --green-border: #bbf7d0;
    --red: #dc2626;
    --red-container: #fee2e2;
    --red-border: #fecaca;
    --blue: #2563eb;
    --blue-container: #dbeafe;
    --blue-border: #bfdbfe;
    --purple: #7c3aed;
    --purple-container: #ede9fe;
    --purple-border: #ddd6fe;
    --yellow: #ca8a04;
    --yellow-container: #fef9c3;
    --yellow-border: #fef08a;
    --teal: #0d9488;
    --teal-container: #ccfbf1;

    --toggle-icon: "🌙";
  }
}

/* ============================================
   SHARED COMPONENT STYLES
   ============================================ */

body {
  background: var(--bg);
  color: var(--on-bg);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Navigation */
.nav-shared {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--outline-variant);
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: background 0.3s, border-color 0.3s;
}
.nav-shared .brand {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
  white-space: nowrap;
}
.nav-shared a {
  color: var(--on-surface-muted);
  text-decoration: none;
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  transition: all 0.2s;
}
.nav-shared a:hover {
  color: var(--on-surface);
  background: var(--surface-high);
}
.nav-shared a.active {
  color: var(--accent);
  background: var(--surface-container);
}

/* Theme Toggle Button */
.theme-toggle {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--outline-variant);
  background: var(--surface-container);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.3s;
}
.theme-toggle:hover {
  background: var(--surface-high);
  border-color: var(--outline);
  transform: scale(1.1);
}

/* Cards */
.card-shared {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.card-shared:hover {
  box-shadow: var(--card-shadow-hover);
}

/* Text hierarchy */
.text-primary { color: var(--on-surface); }
.text-secondary { color: var(--on-surface-variant); }
.text-muted { color: var(--on-surface-muted); }
.text-faint { color: var(--on-surface-faint); }
.text-accent { color: var(--accent); }