/* Shared tokens + resets for embedded system renders. Colors map onto the
   site's own palette (clay/paper) instead of the renders' original
   generic orange/blue, so they read as part of the same product, not a
   pasted-in widget. Dark variant: renders sit on the Work section's
   espresso background. */

:root {
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-voice: 'Caveat', 'Comic Sans MS', cursive;

  --surface-1: rgba(243, 236, 222, 0.05);
  --surface-2: rgba(243, 236, 222, 0.08);
  --border: rgba(243, 236, 222, 0.14);
  --border-strong: rgba(243, 236, 222, 0.28);
  --text-primary: #f3ecde;
  --text-secondary: rgba(243, 236, 222, 0.7);
  --text-muted: rgba(243, 236, 222, 0.45);
  --radius: 10px;

  --accent: #c0563a;   /* was #D85A30 in the source renders — now the site's clay */
  --accent-2: #8fb4d6; /* was #378ADD — lightened for contrast on dark */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Matches the site's espresso-2 card color exactly. Iframe transparency
     compositing is unreliable across browsers/headless renderers, so this
     render owns an explicit, matching background instead of relying on it. */
  background: #262019;
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 4px 2px;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 0.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

button:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion: state changes land instantly (the scripts also skip their loops). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}