/* VDAWorld design system — light editorial.
 *
 * Ink on paper: a near-white page with the scene and code presented as dark
 * cards, so they read as objects on a surface rather than as a background.
 * There are deliberately no gradients anywhere; contrast comes from the cards
 * themselves and from hairline rules.
 *
 * Loaded after Bulma so these tokens win inside .vda-* scopes. Bulma still
 * styles the legacy comparison sections and will be removed with them.
 *
 * Type is a refined system stack rather than a webfont: it renders as SF Pro on
 * the Macs most readers use, costs no network round-trip, and has no FOUT.
 */

:root {
  --vda-bg: #fafaf8;
  --vda-bg-sunken: #f1f1ee;
  --vda-fg: #101014;
  --vda-muted: #6b6b73;
  --vda-faint: #9a9aa2;
  --vda-border: rgba(16, 16, 20, 0.12);
  --vda-border-strong: rgba(16, 16, 20, 0.26);

  /* Dark cards, and the text that sits on them. */
  --vda-card: #16161a;
  --vda-card-2: #1e1e23;
  --vda-card-border: rgba(255, 255, 255, 0.12);
  --vda-on-card: #f2f2f3;
  --vda-on-card-muted: #9a9aa2;
  --vda-on-card-faint: #6b6b73;

  --vda-accent: #1a6fd4;
  /* Competing video models, kept clearly distinct from both our accent and the
     neutral used for ground truth. */
  --vda-baseline: #c9366a;
  --vda-accent-on-card: #4c9dff;
  --vda-accent-wash: rgba(26, 111, 212, 0.1);

  /* Display colours for the three blocks, keyed to the photograph. The mean
     colours sampled from the image are much darker than the blocks appear. */
  --vda-block-red: #d9481f;
  --vda-block-yellow: #d8c81f;
  --vda-block-blue: #2e9bd6;

  --vda-ok: #2f8f57;
  --vda-warn: #b8791f;

  --vda-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
    "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --vda-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
    "Cascadia Code", Menlo, Consolas, monospace;

  --vda-content: 1180px;
  --vda-measure: 68ch;
  --vda-radius: 16px;

  /* One easing curve, three durations. Everything animated uses these. */
  --vda-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vda-fast: 200ms;
  --vda-base: 320ms;
  --vda-slow: 480ms;
}

.vda {
  background: var(--vda-bg);
  color: var(--vda-fg);
  font-family: var(--vda-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vda ::selection {
  background: var(--vda-accent);
  color: #fff;
}

/* Bulma gives bare <pre>/<code> a whitesmoke background and dark text. Inside
   the .vda scope every code surface sets its own colours, so neutralise it once
   here rather than fighting it at each call site. */
.vda pre,
.vda code {
  background: transparent;
  background-color: transparent;
  font-family: var(--vda-mono);
  color: inherit;
  padding: 0;
}

.vda-shell {
  max-width: var(--vda-content);
  margin: 0 auto;
  padding: 0 32px;
}

/* Type ---------------------------------------------------------------------- */

/* Tight tracking is what makes large sizes feel designed rather than just big. */
.vda-display {
  font-size: clamp(2.8rem, 6.4vw, 5.2rem);
  font-weight: 680;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 0;
  color: var(--vda-fg);
}

.vda-lede {
  font-size: clamp(1.05rem, 1.9vw, 1.38rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--vda-muted);
  margin: 0;
}

.vda-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vda-faint);
  margin: 0;
}

.vda-mono {
  font-family: var(--vda-mono);
  font-size: 0.82rem;
  letter-spacing: -0.01em;
}

/* Buttons ------------------------------------------------------------------- */

.vda-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vda-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--vda-border);
  background: transparent;
  color: var(--vda-fg);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--vda-fast) var(--vda-ease),
    background var(--vda-fast) var(--vda-ease),
    color var(--vda-fast) var(--vda-ease);
}

.vda-btn:hover {
  border-color: var(--vda-border-strong);
  background: rgba(16, 16, 20, 0.04);
  color: var(--vda-fg);
}

.vda-btn--primary {
  background: var(--vda-fg);
  border-color: var(--vda-fg);
  color: var(--vda-bg);
}

.vda-btn--primary:hover {
  background: #2a2a32;
  border-color: #2a2a32;
  color: var(--vda-bg);
}

.vda-btn:focus-visible {
  outline: 2px solid var(--vda-accent);
  outline-offset: 3px;
}

/* Authors ------------------------------------------------------------------- */

.vda-authors {
  font-size: 0.95rem;
  color: var(--vda-fg);
  margin: 0;
}

.vda-authors a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--vda-border-strong);
}

.vda-authors a:hover {
  color: var(--vda-accent);
  border-color: var(--vda-accent);
}

.vda-affil {
  font-size: 0.88rem;
  color: var(--vda-muted);
  margin: 3px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .vda *,
  .vda *::before,
  .vda *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}