/* Design tokens shared with the public viewer (slaveofcode/unstuck viewer/src/styles.css). Ruling R3: copied until @unstuck/* is published. */
:root {
  --color-background: #0f172a;
  --color-foreground: #f8fafc;
  --color-card: #1b2336;
  --color-muted: #272f42;
  --color-muted-foreground: #94a3b8;
  --color-border: #475569;
  --color-accent: #22c55e;
  --color-accent-hover: #16a34a;
  --color-on-accent: #0f172a;
  --color-warn: #f59e0b;
  --color-destructive: #ef4444;
  --color-ring: #ffffff;
  --radius: 10px;
  --gap: 8px;
  --touch: 44px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color-scheme: dark;
}

/* Server-rendered auth pages (/login, /auth/verify, …). */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--color-background); color: var(--color-foreground); font: 16px/1.5 var(--font); }
.auth { max-width: 420px; margin: 0 auto; padding: 48px 16px; display: grid; gap: 16px; }
.brand { color: var(--color-foreground); font-weight: 700; font-size: 20px; text-decoration: none; }
h1 { margin: 8px 0 0; font-size: 24px; line-height: 1.3; }
p { margin: 0; }
.muted { color: var(--color-muted-foreground); }
a { color: var(--color-accent); }
form { display: grid; gap: var(--gap); }
label { font-size: 14px; color: var(--color-muted-foreground); }
input { min-height: var(--touch); padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-foreground); font: 16px var(--font); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 18px; border-radius: var(--radius); border: 1px solid transparent; font: 600 16px/1 var(--font); cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.error { color: #fecaca; background: rgb(239 68 68 / 0.12); border: 1px solid rgb(239 68 68 / 0.4); padding: 10px 12px; border-radius: var(--radius); }
.dev { background: rgb(245 158 11 / 0.12); border: 1px solid rgb(245 158 11 / 0.45); padding: 12px; border-radius: var(--radius); word-break: break-all; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.legal { max-width: 720px; text-align: left; }
.legal h2 { font-size: 18px; margin: 24px 0 8px; }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }