/* MCP base tokens and shared form styles — StoryForge v2 */

:root {
  --mcp-bg: #141a22;
  --mcp-panel: #1c242e;
  --mcp-panel-raised: #27323f;
  --mcp-border: #3f4f5f;
  --mcp-border-subtle: #33404d;
  --mcp-text: #f4f6f9;
  --mcp-text-secondary: #d6dee8;
  --mcp-muted: #b0bcc9;
  --mcp-muted-strong: #c9d4df;
  --mcp-accent: #c45c4a;
  --mcp-accent-soft: rgba(196, 92, 74, 0.28);
  --mcp-accent-border: rgba(196, 92, 74, 0.55);
  --mcp-link: #7ec0f0;
  --mcp-focus: #7ec0f0;
  --mcp-error: #ffd4ca;
  --mcp-success: #34e094;
  --mcp-env-dev: #5fc4ff;
  --mcp-env-stage: #ffc266;
  --mcp-env-live: #34e094;
  --mcp-radius: 8px;
  --mcp-radius-sm: 4px;
  --mcp-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mcp-content-max: 48rem;
  --mcp-shell-max: 72rem;
  --mcp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 2px 10px rgba(0, 0, 0, 0.2);
  --mcp-shadow-md: 0 4px 18px rgba(0, 0, 0, 0.34), 0 1px 3px rgba(0, 0, 0, 0.22);
  --mcp-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Dark MCP tokens above are the default dashboard appearance.
   Light mode is not tied to prefers-color-scheme; add an explicit
   toggle later (e.g. html[data-theme="light"]) if needed. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mcp-font);
  background: var(--mcp-bg);
  color: var(--mcp-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--mcp-link);
}

h1 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--mcp-text);
  margin: 0 0 0.35rem;
}

h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--mcp-text);
  margin: 0 0 0.5rem;
}

p {
  color: var(--mcp-text-secondary);
  margin: 0.5rem 0;
}

code {
  font-size: 0.88em;
  color: var(--mcp-text);
  background: var(--mcp-panel);
  padding: 0.12em 0.4em;
  border-radius: var(--mcp-radius-sm);
  border: 1px solid var(--mcp-border);
}

.muted {
  color: var(--mcp-muted);
  font-size: 0.9rem;
}

.env-strip {
  padding: 0.45rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}

.env-strip.dev {
  background: #1e3a52;
  color: var(--mcp-env-dev);
}

.env-strip.stage {
  background: #453218;
  color: var(--mcp-env-stage);
}

.env-strip.live {
  background: #163528;
  color: var(--mcp-env-live);
}

.public-page {
  max-width: var(--mcp-content-max);
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.public-nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--mcp-border);
  background: var(--mcp-panel);
  box-shadow: var(--mcp-shadow-sm), var(--mcp-highlight);
}

.public-nav a {
  color: var(--mcp-text);
  text-decoration: none;
  font-size: 0.95rem;
}

.public-nav .nav-group {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.messages {
  max-width: var(--mcp-shell-max);
  margin: 0 auto;
  padding: 0.75rem 1.25rem 0;
}

.messages p {
  margin: 0.35rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--mcp-radius-sm);
  background: var(--mcp-panel-raised);
  border: 1px solid var(--mcp-border);
  color: var(--mcp-text);
}

input,
textarea,
select {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--mcp-border);
  border-radius: var(--mcp-radius-sm);
  background: var(--mcp-panel);
  color: var(--mcp-text);
  font: inherit;
}

textarea {
  resize: vertical;
}

button,
.btn {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--mcp-border);
  border-radius: var(--mcp-radius-sm);
  background: var(--mcp-panel-raised);
  color: var(--mcp-text);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

button.btn-primary,
.btn-primary {
  background: var(--mcp-accent);
  border-color: var(--mcp-accent);
  color: #fff;
}

button:hover,
.btn:hover {
  filter: brightness(1.08);
}

.errorlist {
  color: var(--mcp-error);
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}