/* ============================================================
   JobSynk — Dark Mode (alternate)
   Warm charcoal for users who prefer dark
   ============================================================ */
[data-theme="dark"] {
  --color-bg: #1C1C20;
  --color-bg-secondary: #222226;
  --color-bg-elevated: #303038;
  --color-surface: #28282E;
  --color-surface-strong: #31313A;
  --color-surface-hover: #2E2E34;
  --color-surface-border: #3A3A42;
  --color-grid: #33333A;
  --color-primary: #D4874D;
  --color-primary-bright: #E09960;
  --color-primary-glow: rgba(212, 135, 77, 0.2);
  --color-primary-dim: rgba(212, 135, 77, 0.1);
  --color-primary-subtle: rgba(212, 135, 77, 0.05);
  --color-accent: #38A169;
  --color-accent-bright: #48BB78;
  --color-success: #38A169;
  --color-success-dim: rgba(56, 161, 105, 0.1);
  --color-info: #60A5FA;
  --color-info-dim: rgba(96, 165, 250, 0.1);
  --color-danger: #F87171;
  --color-danger-dim: rgba(248, 113, 113, 0.1);
  --color-warning: #FBBF24;
  --color-warning-dim: rgba(251, 191, 36, 0.1);
  --color-text: #E4E4E7;
  --color-text-dim: #A1A1AA;
  --color-text-heading: #FAFAFA;
  --color-muted: #6B6B76;
  --color-surface-glass: rgba(40, 40, 46, 0.82);
  --color-surface-glass-strong: rgba(40, 40, 46, 0.94);
  --color-surface-glass-soft: rgba(40, 40, 46, 0.66);
  --color-surface-gradient: linear-gradient(180deg, rgba(45, 45, 52, 0.96), rgba(33, 33, 39, 0.98));
  --color-surface-gradient-strong: linear-gradient(180deg, rgba(48, 48, 56, 0.98), rgba(34, 34, 40, 0.98));
  --color-shell-header: linear-gradient(180deg, rgba(28, 28, 32, 0.96), rgba(28, 28, 32, 0.92));
  --color-shell-nav: linear-gradient(180deg, rgba(34, 34, 38, 0.98), rgba(28, 28, 32, 0.96));
  --color-shell-main: linear-gradient(180deg, #18181c 0%, #141418 100%);
  --grid-opacity: 0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .panel { border-color: var(--color-surface-border); }
[data-theme="dark"] header { background: var(--color-shell-header); }
[data-theme="dark"] nav { background: var(--color-shell-nav); }
[data-theme="dark"] .modal .content { box-shadow: var(--shadow-lg); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-surface-border); }

/* Section heroes and glance cards */
[data-theme="dark"] .section-hero {
  background: rgba(196, 123, 58, 0.04);
  border-color: rgba(196, 123, 58, 0.12);
}
[data-theme="dark"] .glance-card {
  background: var(--color-surface);
  border-color: var(--color-surface-border);
}
[data-theme="dark"] .dashboard-hero-card {
  background: var(--color-surface-gradient);
  border-color: var(--color-primary-border);
}

/* Search result cards */
[data-theme="dark"] .search-result-card {
  background: var(--color-surface);
}

/* Settings accordions */
[data-theme="dark"] .settings-section {
  background: var(--color-surface);
  border-color: var(--color-surface-border);
}
[data-theme="dark"] .settings-section-header:hover {
  background: var(--color-bg-elevated);
}
[data-theme="dark"] .settings-section-body {
  border-top-color: var(--color-surface-border);
}

/* Auth page */
[data-theme="dark"] #view-auth {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 135, 77, 0.08), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(45, 139, 95, 0.06), transparent 40%),
    var(--color-bg);
}

/* Career ops panel */
[data-theme="dark"] .career-ops-panel {
  background: var(--color-surface);
}