/* ===========================
   DARK THEME — DESIGN TOKENS OVERRIDE
   Import AFTER style.css:
   <link rel="stylesheet" href="style.css" />
   <link rel="stylesheet" href="style-dark.css" />
   =========================== */
:root {
  --color-bg: #121214;
  --color-surface: #1C1C1F;
  --color-border: #2A2A2E;
  --color-text-primary: #E8E8EC;
  --color-text-secondary: #8B8B95;
  --color-accent: #4B8BF5;
  --color-warning: #F0A030;
  --color-danger: #EF4444;
  --color-success: #34D399;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.4);
}

/* ===========================
   ELEMENT-SPECIFIC OVERRIDES
   =========================== */

/* Viewer background */
.viewer-pane {
  background: #0D0D0D;
}

/* Fullscreen overlay slightly darker */
.fullscreen-overlay {
  background: rgba(0, 0, 0, 0.96);
}

/* Photo card index badge */
.photo-card-index {
  background: rgba(0, 0, 0, 0.7);
}

/* VIN tooltip */
.vin-tooltip {
  background: #E8E8EC;
  color: #121214;
}

.vin-tooltip::before {
  border-bottom-color: #E8E8EC;
}

/* VIN badge hover glow */
.vin-badge:hover {
  box-shadow: 0 0 0 2px rgba(75, 139, 245, 0.2);
}

/* Scrollbar colors */
.photo-strip::-webkit-scrollbar-thumb,
.info-panel::-webkit-scrollbar-thumb {
  background: #3A3A40;
}

.photo-strip {
  scrollbar-color: #3A3A40 transparent;
}

.info-panel {
  scrollbar-color: #3A3A40 transparent;
}