/* Sandbox root styling — pages.yeja-ai.com.
 *
 * EXTERNAL, not inline, and that is a CSP requirement rather than a
 * preference. The sandbox policy is style-src 'self' (R3's Phase 2 target,
 * adopted here from the start since this origin has no legacy inline CSS to
 * migrate). An inline <style> block is BLOCKED by it — verified live: the
 * first version of this page shipped its CSS inline, loaded without error,
 * and rendered completely unstyled with a transparent body and default-blue
 * links. Nothing in the DOM looked wrong; only a computed-style read caught
 * it.
 *
 * Tokens only, no literal hex — apps/shared/design-tokens.css is the source.
 */
/* Tokens only — no literal hex. A scrim-style literal would still be a
   color-mix() over a token per the design guide, but nothing here needs one. */
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--yeja-canvas);
  color: var(--yeja-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--text-body-size, 14px);
  line-height: var(--text-body-line, 20px);
}
main {
  max-width: 34rem;
  text-align: center;
}
h1 {
  font-size: var(--text-h1-size, 24px);
  line-height: var(--text-h1-line, 32px);
  font-weight: var(--text-h1-weight, 600);
  margin: 0 0 12px;
}
p {
  color: var(--yeja-text-muted);
  margin: 0 0 16px;
}
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
}
/* Cobalt focus ring, 2px at 2px offset — design guide non-negotiable.
   --yeja-focus rather than --yeja-cobalt: an artist theme repaints cobalt,
   and the focus ring must not follow it (task 0.3). */
a:focus-visible {
  outline: 2px solid var(--yeja-focus);
  outline-offset: 2px;
}
.note {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--yeja-border);
  font-size: var(--text-label-size, 12px);
  line-height: var(--text-label-line, 16px);
  color: var(--yeja-text-tertiary);
}
/* No data-theme here: switching it requires a script, and this origin has
   none. prefers-color-scheme is the whole theme story on the sandbox. */
@media (prefers-color-scheme: dark) {
  :root {
    --yeja-canvas: var(--yeja-gray-1000);
    --yeja-text-primary: var(--yeja-gray-0);
    --yeja-text-muted: var(--yeja-gray-400);
    --yeja-text-tertiary: var(--yeja-gray-500);
    --yeja-border: var(--yeja-gray-850);
  }
}