/* AGS Dark Mode Identity — shared design tokens.
   Dark (Obsidian + Construction Gold) is the default; light is opt-in via
   html[data-theme="light"], toggled by theme.js and set early by theme-init.js. */
:root {
  --bg: #0F1115;            /* Obsidian */
  --bg-nav: rgba(26,29,35,0.95);   /* Graphite, 95% opacity */
  --bg-card: #171A20;
  --bg-card-alt: #1A1D23;   /* Graphite */
  --gold: #F4B400;          /* Construction Gold */
  --gold-hover: #FFD24A;
  --gold-ink: #0F1115;      /* text drawn on top of gold */
  --heading: #FFFFFF;
  --text: #C7CDD6;          /* Body text */
  --text-strong: #F8FAFC;   /* Steel White */
  --border: #2B313A;
  --shadow: rgba(0,0,0,0.45);
}

/* "Light" mode is repurposed as the Industrial Dark UI — steel blue,
   construction yellow and slate grey on a deep navy glass surface —
   rather than a white/paper theme. Toggled the same way as before. */
html[data-theme="light"] {
  --bg: #0A1220;
  --bg-nav: rgba(30,41,59,0.55);
  --bg-card: rgba(30,41,59,0.45);
  --bg-card-alt: rgba(51,65,85,0.35);
  --gold: #F4B400;
  --gold-hover: #FFD24A;
  --gold-ink: #12151B;
  --heading: #FFFFFF;
  --text: #B9C2CF;
  --text-strong: #F1F5F9;
  --border: rgba(148,163,184,0.22);
  --shadow: rgba(2,6,23,0.55);
  --steel-blue: #1E40AF;
  --steel-blue-glow: rgba(30,64,175,0.45);
  --slate: #374151;
}

html[data-theme="light"] body {
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(30,64,175,0.35), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(244,180,0,0.10), transparent 55%),
    linear-gradient(180deg, #0B1424 0%, #060912 100%);
  background-attachment: fixed;
}

/* Glassmorphism surfaces: dashboard cards, tables, modals, sidebar */
html[data-theme="light"] .stat-card,
html[data-theme="light"] .proj-card,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .modal,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .quot-detail {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 8px 32px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html[data-theme="light"] .sidebar { border-radius: 0; }

html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .proj-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px var(--steel-blue-glow), 0 8px 28px var(--shadow);
}

html[data-theme="light"] .nav-link {
  border-radius: 10px;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="light"] .nav-link:hover {
  transform: translateX(4px);
}
html[data-theme="light"] .nav-link.active {
  background: rgba(30,64,175,0.25) !important;
  box-shadow: inset 0 0 0 1px rgba(30,64,175,0.5), 0 0 16px var(--steel-blue-glow);
}

html[data-theme="light"] .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(244,180,0,0.35);
}

html[data-theme="light"] .status-badge,
html[data-theme="light"] .badge {
  box-shadow: 0 0 10px rgba(244,180,0,0.25);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-strong);
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.theme-toggle:hover { border-color: var(--gold); }