/* ═══════════════════════════════════════════════════════════════════
   vt_theme.css — VibeTraffic Signal shared design system

   THE single custom-CSS layer. Loaded LAST on every page:
     - base.html:      output.css → mk_chrome.css → vt_theme.css
     - app_base.html:  … → app_workspace.css → shell_v2.css → vt_theme.css

   Design direction: friendly product (Stripe/Notion). Warm neutral paper
   surfaces, warm near-black ink, ONE accent — violet #6D5DFB. No gradients,
   no hard offset shadows, no hover lifts.

   Every --vt-* token below aliases a design token from input.css. Change
   colors THERE and rebuild (`npm run build:css`); do not edit hexes here.

   Shared components:
     .vt-btn                 base button. Variants:
        .vt-btn-primary      solid accent
        .vt-btn-ghost        quiet outline on white surface
        .vt-btn-danger-soft  soft coral tint (never harsh red)
     .vt-card                white surface, warm border, soft shadow
     .vt-pill                status chip. Variants:
        .vt-pill-ok / .vt-pill-warn / .vt-pill-bad / .vt-pill-neutral
     .vt-banner              friendly tinted notice with icon slot.
        Variants: .vt-banner-info / .vt-banner-warn / .vt-banner-error
        Put an icon in .vt-banner-icon and content in .vt-banner-body.
     .vt-toast               toast card. Variants:
        .vt-toast-ok / .vt-toast-warn / .vt-toast-bad
     .vt-progress-step       scanner step row. State modifiers:
        .is-done / .is-active / .is-pending (dot in .vt-progress-step-dot)
     .vt-skeleton            shimmer placeholder (alias: .skeleton)

   Legacy modern.css classes ported here (modern.css no longer loads):
     .vt-animate-fade-in .vt-fade-fast .vt-delay-100..400 .vt-delay-2000
     .vt-container .vt-bg-gray-50 .vt-glass .vt-glass-card
     .vt-badge .vt-btn-gradient .vt-input
     .vt-legal-nav .vt-legal-prose .vt-legal-highlight
     .vt-text-5xl .vt-text-xl .vt-token-block
     .vt-domain-switcher-panel/-section/-label/-list/-row/-dot
     .vt-kicker .vt-metric-band .vt-metric-card(-label/-value)
   ═══════════════════════════════════════════════════════════════════ */

/* Every --vt-* token maps onto a design token from static/css/input.css.
   Those are emitted into :root by Tailwind, so referencing them here keeps
   ONE source of truth: change input.css, rebuild, and the whole app shell
   (app_workspace.css, shell_v2/v3.css, bright_app.css all read these vars)
   follows automatically. */
:root {
  /* ── Semantic tokens ──────────────────────────────────────────── */
  --vt-bg: var(--color-surface-50);
  --vt-surface: var(--color-surface-0);
  --vt-ink: var(--color-ink-900);
  --vt-ink-2: var(--color-ink-700);
  --vt-muted: var(--color-ink-500);
  --vt-border: var(--color-surface-200);
  --vt-brand: var(--color-accent-500);
  --vt-brand-hover: var(--color-accent-600);
  --vt-brand-ink: var(--color-accent-700);
  --vt-brand-tint: var(--color-accent-50);
  --vt-brand-soft: var(--color-accent-100);
  /* No second brand hue: "gold" now resolves to the same accent so any
     legacy two-tone treatment collapses to one color. */
  --vt-gold: var(--color-accent-500);
  --vt-gold-tint: var(--color-accent-50);
  --vt-ok: var(--color-success-700);
  --vt-ok-tint: var(--color-success-50);
  --vt-warn: var(--color-warning-700);
  --vt-warn-tint: var(--color-warning-50);
  --vt-bad: var(--color-danger-700);
  --vt-bad-tint: var(--color-danger-50);
  --vt-radius: var(--radius-vt-md);
  --vt-radius-lg: var(--radius-vt-md);
  --vt-radius-xl: var(--radius-vt-lg);
  --vt-shadow: var(--shadow-vt-card);
  --vt-shadow-lg: var(--shadow-vt-pop);

  /* ── Legacy aliases (consumed by app_workspace.css / shell_v2.css /
        mk_chrome.css and older markup — keep names stable) ─────── */
  --vt-primary-50: var(--color-accent-50);
  --vt-primary-100: var(--color-accent-100);
  --vt-primary-200: var(--color-accent-200);
  --vt-primary-300: var(--color-accent-300);
  --vt-primary-400: var(--color-accent-400);
  --vt-primary-500: var(--color-accent-500);
  --vt-primary-600: var(--color-accent-600);
  --vt-primary-700: var(--color-accent-700);
  --vt-primary-800: var(--color-accent-800);
  --vt-primary-900: var(--color-accent-900);

  --vt-accent-50: var(--color-accent-50);
  --vt-accent-100: var(--color-accent-100);
  --vt-accent-200: var(--color-accent-200);
  --vt-accent-300: var(--color-accent-300);
  --vt-accent-400: var(--color-accent-400);
  --vt-accent-500: var(--color-accent-500);
  --vt-accent-600: var(--color-accent-600);
  --vt-accent-700: var(--color-accent-700);

  --vt-gray-25: var(--color-surface-0);
  --vt-gray-50: var(--color-surface-50);
  --vt-gray-100: var(--color-surface-100);
  --vt-gray-150: var(--color-surface-100);
  --vt-gray-200: var(--color-surface-200);
  --vt-gray-300: var(--color-surface-300);
  --vt-gray-400: var(--color-surface-400);
  --vt-gray-500: var(--color-surface-500);
  --vt-gray-600: var(--color-surface-600);
  --vt-gray-700: var(--color-surface-700);
  --vt-gray-800: var(--color-surface-800);
  --vt-gray-900: var(--color-surface-900);

  --vt-danger: var(--color-danger-700);
  --vt-danger-soft: var(--color-danger-50);
  --vt-ok-soft: var(--color-success-50);
  --vt-warn-soft: var(--color-warning-50);

  /* Focus ring shared by every interactive control. */
  --vt-focus-ring: var(--shadow-vt-focus);

  /* Support vars used by ported modern.css classes */
  --vt-font-sans: var(--font-sans);
  --vt-font-mono: var(--font-mono);
  --vt-space-xs: 0.25rem;
  --vt-space-sm: 0.5rem;
  --vt-space-md: 1rem;
  --vt-space-lg: 1.5rem;
  --vt-space-xl: 2rem;
  --vt-radius-sm: var(--radius-vt-sm);
  --vt-radius-md: var(--radius-vt-md);
  --vt-radius-full: var(--radius-vt-pill);
  --vt-radius-2xl: var(--radius-vt-xl);
  --vt-shadow-sm: var(--shadow-vt-sm);
  --vt-shadow-md: var(--shadow-vt-card);
  --vt-transition-fast: 120ms ease;
  --vt-transition-normal: 200ms ease;
}

/* ══════════════════════════════════════════════════════════════════
   Shared components
   ══════════════════════════════════════════════════════════════════ */

/* Buttons */
.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--vt-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--vt-ink-2);
  font-family: var(--vt-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--vt-transition-normal), border-color var(--vt-transition-normal),
    color var(--vt-transition-normal), box-shadow var(--vt-transition-normal);
}
/* No hover lift: buttons change color, they don't jump. */
.vt-btn:focus-visible { outline: none; box-shadow: var(--vt-focus-ring); }
.vt-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.vt-btn-primary {
  background: var(--vt-brand);
  border-color: var(--vt-brand);
  color: #fff;
}
.vt-btn-primary:hover {
  background: var(--vt-brand-hover);
  border-color: var(--vt-brand-hover);
  color: #fff;
}

.vt-btn-ghost {
  background: var(--vt-surface);
  border-color: var(--vt-border);
  color: var(--vt-ink-2);
}
.vt-btn-ghost:hover {
  border-color: var(--vt-gray-300);
  background: var(--vt-gray-50);
  color: var(--vt-ink);
}

.vt-btn-danger-soft {
  background: var(--vt-bad-tint);
  border-color: #FECDCA;
  color: var(--vt-bad);
}
.vt-btn-danger-soft:hover {
  background: #FEE4E2;
  border-color: #FDA29B;
  color: var(--vt-bad);
}

/* Legacy alias: was a gradient CTA. Now identical to the solid primary —
   the design system has one accent and no gradients. */
.vt-btn-gradient {
  background: var(--vt-brand);
  border-color: var(--vt-brand);
  color: #fff;
}
.vt-btn-gradient:hover {
  background: var(--vt-brand-hover);
  border-color: var(--vt-brand-hover);
  color: #fff;
}

/* Card */
.vt-card {
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-xl);
  padding: var(--vt-space-lg);
  box-shadow: var(--vt-shadow);
  transition: box-shadow var(--vt-transition-normal), border-color var(--vt-transition-normal),
    transform var(--vt-transition-normal);
  position: relative;
}
/* Cards are surfaces, not buttons — only lift the border on hover. */
.vt-card:hover {
  border-color: var(--vt-gray-300);
}

/* Status pill */
.vt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.vt-pill-ok { background: var(--vt-ok-tint); color: var(--vt-ok); border-color: #A6F4C5; }
.vt-pill-warn { background: var(--vt-warn-tint); color: var(--vt-warn); border-color: #FEDF89; }
.vt-pill-bad { background: var(--vt-bad-tint); color: var(--vt-bad); border-color: #FECDCA; }
.vt-pill-neutral { background: var(--vt-gray-100); color: var(--vt-gray-600); border-color: var(--vt-border); }

/* Friendly tinted banner with icon slot */
.vt-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--vt-radius-lg);
  border: 1px solid var(--vt-border);
  background: var(--vt-gray-50);
  color: var(--vt-ink-2);
  font-size: 0.9rem;
  line-height: 1.5;
}
.vt-banner-icon { flex: 0 0 auto; display: inline-flex; margin-top: 0.1rem; }
.vt-banner-body { flex: 1 1 auto; min-width: 0; }
.vt-banner-info { background: var(--vt-brand-tint); border-color: var(--vt-primary-200); color: var(--vt-brand-ink); }
.vt-banner-warn { background: var(--vt-warn-tint); border-color: #FEDF89; color: var(--vt-warn); }
.vt-banner-error { background: var(--vt-bad-tint); border-color: #FECDCA; color: var(--vt-bad); }

/* Toast — layout intentionally minimal here: existing app toasts get their
   structure from app_workspace.css (.vt-toast-body). This layer rethemes
   colors and provides tinted variants for new markup. */
.vt-toast {
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg);
  background: var(--vt-surface);
  box-shadow: var(--vt-shadow-lg);
  color: var(--vt-ink-2);
}
.vt-toast-ok { border-color: #A6F4C5; background: var(--vt-ok-tint); color: var(--vt-ok); }
.vt-toast-warn { border-color: #FEDF89; background: var(--vt-warn-tint); color: var(--vt-warn); }
.vt-toast-bad { border-color: #FECDCA; background: var(--vt-bad-tint); color: var(--vt-bad); }

/* Scanner progress step */
.vt-progress-step {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--vt-radius-md);
  color: var(--vt-muted);
  font-size: 0.875rem;
  transition: background var(--vt-transition-normal), color var(--vt-transition-normal);
}
.vt-progress-step-dot {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 9999px;
  background: var(--vt-gray-300);
}
.vt-progress-step.is-active { color: var(--vt-brand-ink); background: var(--vt-brand-tint); font-weight: 600; }
.vt-progress-step.is-active .vt-progress-step-dot {
  background: var(--vt-brand);
  box-shadow: 0 0 0 3px rgba(109, 93, 251, 0.18);
  animation: vt-pulse-dot 1.6s ease-in-out infinite;
}
.vt-progress-step.is-done { color: var(--vt-ok); }
.vt-progress-step.is-done .vt-progress-step-dot { background: var(--vt-ok); }
.vt-progress-step.is-pending { color: var(--vt-muted); }

@keyframes vt-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(109, 93, 251, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(109, 93, 251, 0.08); }
}

/* Skeleton shimmer (.skeleton kept as legacy alias for index.html) */
.vt-skeleton,
.skeleton {
  background: linear-gradient(90deg, var(--vt-gray-200) 25%, var(--vt-gray-100) 50%, var(--vt-gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--vt-radius-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════════
   Legacy ports from modern.css (removed from base.html) — rethemed
   to the warm palette. Only classes still referenced by templates/js.
   ══════════════════════════════════════════════════════════════════ */

.vt-bg-gray-50 { background-color: var(--vt-gray-50); }

.vt-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--vt-space-lg);
}

/* Animations + delays */
.vt-animate-fade-in { animation: vt-fade-in 0.5s ease-out forwards; }
.vt-fade-fast { animation: vt-fade-in 0.5s ease-out; }
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.vt-delay-100 { animation-delay: 0.1s; }
.vt-delay-200 { animation-delay: 0.2s; }
.vt-delay-300 { animation-delay: 0.3s; }
.vt-delay-400 { animation-delay: 0.4s; }
.vt-delay-2000 { animation-delay: 2s; }

/* Glass surfaces (light warm) */
.vt-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--vt-border);
  box-shadow: 0 4px 30px rgba(28, 25, 23, 0.04);
}
.vt-glass-card {
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-xl);
  box-shadow: var(--vt-shadow);
}

/* Badge (base chip — pair with a .vt-badge-* variant, a .vt-pill-*, or
   Tailwind color utilities) */
.vt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--vt-radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.vt-badge-neutral { background: var(--vt-gray-100); color: var(--vt-ink-2); }
.vt-badge-accent  { background: var(--vt-brand-tint); color: var(--vt-brand-ink); }
.vt-badge-ok,
.vt-badge-success { background: var(--vt-ok-tint); color: var(--vt-ok); }
.vt-badge-warning { background: var(--vt-warn-tint); color: var(--vt-warn); }
.vt-badge-bad,
.vt-badge-danger  { background: var(--vt-bad-tint); color: var(--vt-bad); }
.vt-badge-primary { background: var(--vt-brand-tint); color: var(--vt-brand-ink); }

/* Text input */
.vt-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color var(--vt-transition-normal), box-shadow var(--vt-transition-normal);
  background-color: var(--vt-surface);
  color: var(--vt-ink);
}
.vt-input:focus {
  outline: none;
  border-color: var(--vt-brand);
  box-shadow: 0 0 0 4px rgba(109, 93, 251, 0.12);
}
.vt-input::placeholder { color: var(--vt-gray-400); }

/* Legal pages (dpa / terms / faq) */
.vt-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--vt-radius-2xl);
  border: 1px solid var(--vt-border);
  background: linear-gradient(135deg, var(--vt-brand-tint), var(--vt-gold-tint));
  box-shadow: var(--vt-shadow);
}
.vt-legal-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vt-gray-700);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--vt-border);
  text-decoration: none;
  transition: var(--vt-transition-normal);
}
.vt-legal-nav a:hover,
.vt-legal-nav a:focus-visible {
  color: var(--vt-brand-hover);
  border-color: var(--vt-primary-200);
  box-shadow: var(--vt-shadow-md);
}
.vt-legal-nav a .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--vt-primary-100);
  color: var(--vt-brand-hover);
  font-size: 0.75rem;
}
@media (max-width: 640px) {
  .vt-legal-nav { flex-direction: column; }
  .vt-legal-nav a { width: 100%; justify-content: space-between; }
}
.vt-legal-prose h2 {
  position: relative;
  padding-left: 1.2rem;
  border-left: 4px solid var(--vt-primary-200);
}
.vt-legal-highlight {
  border-radius: var(--vt-radius-xl);
  border: 1px solid var(--vt-border);
  background: linear-gradient(120deg, var(--vt-brand-tint), var(--vt-gold-tint));
  padding: 1.5rem;
}

/* Display text helpers */
.vt-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.vt-text-5xl { font-size: 3rem; line-height: 1; letter-spacing: -0.025em; }

/* Kicker + metric cards (domains page) */
.vt-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--vt-brand-hover);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vt-kicker::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--vt-brand), var(--vt-gold));
  box-shadow: 0 0 0 0.18rem rgba(109, 93, 251, 0.16);
}
.vt-metric-band,
.vt-domain-quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.vt-metric-card {
  padding: 1rem;
  border-radius: 1.1rem;
  border: 1px solid var(--vt-border);
  background: var(--vt-surface);
}
.vt-metric-card-label {
  display: block;
  color: var(--vt-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vt-metric-card-value {
  display: block;
  margin-top: 0.5rem;
  color: var(--vt-ink);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Token / code block */
.vt-token-block {
  padding: 1rem;
  border-radius: 1rem;
  background: var(--vt-gray-50);
  border: 1px solid var(--vt-border);
  color: var(--vt-brand-ink);
  font-family: var(--vt-font-mono);
  font-size: 0.86rem;
  word-break: break-all;
}

/* Domain switcher dropdown (app sidebar) */
.vt-domain-switcher-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.75rem);
  width: min(30rem, calc(100vw - 2rem));
  padding: 1rem;
  border-radius: 1.25rem;
  border: 1px solid var(--vt-border);
  background: var(--vt-surface);
  box-shadow: var(--vt-shadow-lg);
  z-index: 60;
}
.vt-domain-switcher-section { margin-top: 1rem; }
.vt-domain-switcher-label {
  color: var(--vt-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vt-domain-switcher-list { display: grid; gap: 0.55rem; margin-top: 0.65rem; }
.vt-domain-switcher-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.8rem 0.85rem;
  border-radius: 0.95rem;
  border: 1px solid var(--vt-border);
  background: var(--vt-surface);
  color: var(--vt-ink);
  text-align: left;
  cursor: pointer;
}
.vt-domain-switcher-row:hover {
  border-color: var(--vt-primary-200);
  background: var(--vt-brand-tint);
}
.vt-domain-switcher-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--vt-ok);
  box-shadow: 0 0 0 0.18rem rgba(21, 128, 61, 0.12);
}
.vt-domain-switcher-dot.warn { background: #F79009; box-shadow: 0 0 0 0.18rem rgba(247, 144, 9, 0.12); }
.vt-domain-switcher-dot.fail { background: var(--vt-bad); box-shadow: 0 0 0 0.18rem rgba(179, 38, 30, 0.12); }

/* Domain identity bar (domains page hero) */
.vt-domain-identity-bar {
  display: grid;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid var(--vt-border);
  background:
    linear-gradient(120deg, rgba(109, 93, 251, 0.10), transparent 35%),
    var(--vt-surface);
}