:root {
  --wrapper-width: 1280px;

  /* Studio Deadline brand tokens — see warehouse/docs/brief.md §2.3 */
  /* Stored as space-separated RGB (not hex) so Tailwind's rgb(var(...) / <alpha-value>) */
  /* pattern in tailwind.config can apply opacity modifiers (bg-ink/50, etc). A plain hex */
  /* value here would make every .../NN opacity utility silently resolve to transparent. */
  --color-ink: 20 44 130; /* #142c82 */
  --color-ink-tint: 30 55 153; /* #1e3799 */
  --color-paper: 250 250 248; /* #fafaf8 */
  --color-paper-tint: 238 240 249; /* #eef0f9 */
  --color-accent: 198 255 0; /* #c6ff00 */
  --color-slate: 72 80 122; /* #48507a */
  --color-slate-on-dark: 174 184 232; /* #aeb8e8 */
}

/* Infinite logo marquee (Proof Strip) — Tailwind has no keyframe utility for this, so it's */
/* the one case that genuinely needs custom CSS per the styling contract. The track holds the */
/* logo set twice back to back; animating to -50% loops seamlessly. */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 28s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none;
  }
}

/* Brand-colored keyboard focus ring, sitewide — replaces the browser default blue outline. */
/* :focus-visible only (not plain :focus) so it shows for keyboard navigation but not mouse */
/* clicks, per standard accessibility practice. Ink on light sections; on any bg-ink section */
/* (footer, closing CTAs, nav/filter overlays, "More Projects" lists, etc.) an ink ring would */
/* be invisible against the ink background, so it flips to paper there instead. */
:focus-visible {
  outline: 2px solid rgb(var(--color-ink));
  outline-offset: 2px;
}

.bg-ink :focus-visible {
  outline-color: rgb(var(--color-paper));
}