/* Vayva Verification — Brand Override Theme */
/* Matches Vayva merchant/ops design system exactly */
/* Source: merchant/src/app/globals.css */

/* ═══════════════════════════════════════════════════════════
   DARK THEME — Pure black (matches merchant/ops)
   Primary: #179f49 (brand green from logo gradient)
   ═══════════════════════════════════════════════════════════ */
html[data-theme=dark] {
  /* Surfaces — pure black like merchant/ops */
  --paper: #000000;
  --panel: #0A0A0A;
  --panel-2: #141414;
  --panel-3: #1a1a1a;

  /* Text */
  --ink: #FAFAFA;
  --mid: #A1A1AA;
  --soft: #71717a;

  /* Borders */
  --rule: #262626;
  --rule-strong: #333333;

  /* Accent — Vayva brand green */
  --accent: #179f49;
  --accent-fg: #ffffff;
  --accent-soft: rgba(23, 159, 73, 0.12);
  --accent-ink: #179f49;

  /* Semantic — match merchant dark mode */
  --flag: #DC2626;
  --warn: #FBBF24;
  --info: #60A5FA;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — Clean white (matches merchant/ops)
   Primary: #0F6B35 (WCAG AA 4.8:1 on white)
   ═══════════════════════════════════════════════════════════ */
html[data-theme=light] {
  /* Surfaces */
  --paper: #F9FAFB;
  --panel: #FFFFFF;
  --panel-2: #F3F4F6;
  --panel-3: #E5E7EB;

  /* Text */
  --ink: #111827;
  --mid: #646C7A;
  --soft: #9ca3af;

  /* Borders */
  --rule: #E5E7EB;
  --rule-strong: #D1D5DB;

  /* Accent — WCAG AA compliant green */
  --accent: #0F6B35;
  --accent-fg: #ffffff;
  --accent-soft: #ECFDF5;
  --accent-ink: #0F6B35;

  /* Semantic */
  --flag: #DC2626;
  --warn: #F59E0B;
  --info: #3B82F6;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY — Inter (matches merchant/ops body font)
   ═══════════════════════════════════════════════════════════ */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ═══════════════════════════════════════════════════════════
   COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════ */

/* Primary buttons — Vayva green */
.dev-portal .btn.primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 150ms ease !important;
}
.dev-portal .btn.primary:hover {
  filter: brightness(1.15) !important;
}

/* Toggle switches */
.dev-portal .toggle.on .sw {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}
.dev-portal .toggle.on .sw:after {
  background: var(--accent) !important;
}

/* Status LEDs */
.dev-portal .led {
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent) !important;
}

/* Event checkboxes */
.dev-portal .event input[type=checkbox]:checked {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Live/status pills */
.dev-portal .pill.live {
  color: var(--accent) !important;
  border-color: color-mix(in oklab, var(--accent) 35%, transparent) !important;
  background: var(--accent-soft) !important;
}

/* Input focus rings — Vayva green */
.dev-portal .input:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent) !important;
}
.dev-portal .btn:focus-visible {
  outline-color: var(--accent) !important;
}

/* Active events */
.dev-portal .event.on {
  background: color-mix(in oklab, var(--accent-soft) 50%, var(--panel)) !important;
}

/* Upload/drop zones */
.upload-zone, .drop-zone {
  border-color: var(--rule-strong) !important;
  border-radius: 12px !important;
  transition: border-color 200ms ease !important;
}
.upload-zone:hover, .drop-zone:hover {
  border-color: var(--accent) !important;
}

/* Progress indicators */
.progress-bar, .step-indicator .active {
  background: var(--accent) !important;
}
.step-completed {
  color: var(--accent) !important;
}

/* Verification success state */
.verification-success {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Logo/brand text */
.logo-text, .brand-name {
  color: var(--ink) !important;
}

/* Forge/workspace panel */
.dev-portal .forge {
  background: var(--panel-2) !important;
  border-color: var(--rule) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
}
.dev-portal .forge .badge {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}

/* ═══════════════════════════════════════════════════════════
   ADDITIONAL OVERRIDES — catch remaining Idswyft cyan
   ═══════════════════════════════════════════════════════════ */

/* Any remaining cyan (#00F0FF / #00d4d4) → Vayva green */
[style*="#00F0FF"], [style*="#00f0ff"] {
  color: var(--accent) !important;
}
[style*="background*:#00F0FF"], [style*="background*:#00f0ff"] {
  background-color: var(--accent) !important;
}

/* Links — use accent color */
a {
  color: var(--accent) !important;
}

/* Navigation active state */
.nav-item.active, .sidebar-item.active {
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
}

/* Scrollbar — subtle, matches dark theme */
html[data-theme=dark] ::-webkit-scrollbar {
  width: 8px;
}
html[data-theme=dark] ::-webkit-scrollbar-track {
  background: #000000;
}
html[data-theme=dark] ::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 4px;
}
html[data-theme=dark] ::-webkit-scrollbar-thumb:hover {
  background: #444444;
}