/**
 * VeriTrust — global skin (navy + silver)
 * Complements Tailwind in templates/index.html; safe to load after Tailwind CDN.
 */

:root {
  --vt-navy-950: #020617;
  --vt-navy-900: #0f172a;
  --vt-navy-800: #1e293b;
  --vt-navy-700: #334155;
  --vt-silver-100: #f1f5f9;
  --vt-silver-300: #cbd5e1;
  --vt-silver-400: #94a3b8;
  --vt-accent: #38bdf8;
  --vt-accent-dim: rgba(56, 189, 248, 0.35);
  --vt-ring: rgba(148, 163, 184, 0.45);
  --vt-radius: 0.75rem;
  --vt-radius-lg: 1rem;
}

/* --- Buttons (primary actions) --- */
button:not(:disabled),
[role="button"] {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

button:not(:disabled):active {
  transform: translateY(1px);
}

#btn-idv-scan,
#btn-verify-file:not(:disabled),
#btn-start:not(:disabled) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 14px rgba(0, 0, 0, 0.35);
}

#btn-idv-scan:hover,
#btn-verify-file:not(:disabled):hover,
#btn-start:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 6px 20px rgba(56, 189, 248, 0.18);
}

/* Tab pills */
.tab-button {
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.tab-button:not(.bg-sky-600):hover {
  background-color: rgba(51, 65, 85, 0.85) !important;
}

/* --- Scan / camera frame --- */
#liveness-video-frame {
  border-radius: var(--vt-radius-lg);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

#liveness-video-frame.is-active {
  border-color: var(--vt-accent) !important;
  box-shadow:
    0 0 0 1px var(--vt-accent-dim),
    0 0 28px rgba(56, 189, 248, 0.22),
    0 12px 40px rgba(0, 0, 0, 0.5);
}

/* --- IDV preview strip --- */
#idv-preview-strip {
  border-radius: var(--vt-radius-lg);
  background: linear-gradient(
    145deg,
    rgba(15, 23, 42, 0.92) 0%,
    rgba(30, 41, 59, 0.75) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.35);
}

#idv-preview-front,
#idv-preview-back {
  border-radius: 0.5rem !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  background: var(--vt-navy-950);
}

/* --- File inputs --- */
input[type="file"] {
  border-radius: var(--vt-radius) !important;
}

input[type="file"]::file-selector-button {
  border-radius: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- Code / pre output --- */
#out-file,
pre[id^="out-"] {
  border-radius: var(--vt-radius) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* --- Cards (sections) --- */
section.rounded-2xl.border.border-slate-800 {
  border-color: rgba(100, 116, 139, 0.35) !important;
}

/* --- Focus visibility (a11y) --- */
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--vt-ring);
  outline-offset: 2px;
}

/* --- Quality / amber panels --- */
#idv-quality-preview {
  border-radius: var(--vt-radius-lg) !important;
}