/* ============================================
   AgentGate — design tokens, reset, base typography

   Loaded by the host page AND inlined into the render sandbox by sandbox.js, so
   share content and host chrome resolve the same variables. Keep this file free of
   anything specific to either side.
   ============================================ */

:root {
  --bg: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-tertiary: #f0f2f5;
  --fg: #1f2328;
  --fg-muted: #656d76;
  --fg-subtle: #8b949e;
  --border: #d1d9e0;
  --border-light: #e8ecf0;
  --accent: #0969da;
  --danger: #d1242f;
  --success: #1a7f37;
  --diff-add-bg: #dafbe1;
  --diff-add-fg: #116329;
  --diff-del-bg: #ffebe9;
  --diff-del-fg: #82071e;
  --diff-hunk-bg: #ddf4ff;
  --diff-hunk-fg: #0969da;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --content-font-size: 0.9375rem;
  --content-font-family: var(--font-sans);
  --code-font-size: 0.8125rem;
  --code-font-family: var(--font-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
      --bg: #0d1117;
      --bg-secondary: #161b22;
      --bg-tertiary: #21262d;
      --fg: #e6edf3;
      --fg-muted: #8b949e;
      --fg-subtle: #6e7681;
      --border: #30363d;
      --border-light: #21262d;
      --accent: #58a6ff;
      --danger: #f85149;
      --success: #3fb950;
      --diff-add-bg: #0d2818;
      --diff-add-fg: #3fb950;
      --diff-del-bg: #2d1117;
      --diff-del-fg: #f85149;
      --diff-hunk-bg: #0d2444;
      --diff-hunk-fg: #58a6ff;
    }
}

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

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  color: var(--fg-muted);
  line-height: 1.6;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.text-mono { font-family: var(--font-mono); }

.text-muted { color: var(--fg-muted); }

.text-sm { font-size: 0.875rem; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flex { display: flex; }

.items-center { align-items: center; }

.gap-2 { gap: 0.5rem; }

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-tertiary: #f0f2f5;
  --fg: #1f2328;
  --fg-muted: #656d76;
  --fg-subtle: #8b949e;
  --border: #d1d9e0;
  --border-light: #e8ecf0;
  --accent: #0969da;
  --danger: #d1242f;
  --success: #1a7f37;
  --diff-add-bg: #dafbe1;
  --diff-add-fg: #116329;
  --diff-del-bg: #ffebe9;
  --diff-del-fg: #82071e;
  --diff-hunk-bg: #ddf4ff;
  --diff-hunk-fg: #0969da;
}

:root[data-theme="dark"] {
  --bg: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --fg: #e6edf3;
  --fg-muted: #8b949e;
  --fg-subtle: #6e7681;
  --border: #30363d;
  --border-light: #21262d;
  --accent: #58a6ff;
  --danger: #f85149;
  --success: #3fb950;
  --diff-add-bg: #0d2818;
  --diff-add-fg: #3fb950;
  --diff-del-bg: #2d1117;
  --diff-del-fg: #f85149;
  --diff-hunk-bg: #0d2444;
  --diff-hunk-fg: #58a6ff;
}

:root[data-theme="light"] .expiry-badge--warning {
  background: #fff8c5;
  color: #9a6700;
}

:root[data-theme="dark"] .expiry-badge--warning {
  background: #2d2200;
  color: #f0c000;
}

:root[data-theme="light"] .expiry-badge--preserved {
  background: #eef2f7;
  color: #4b5563;
}

:root[data-theme="dark"] .expiry-badge--preserved {
  background: #1f2933;
  color: #c8d1da;
}

:root[data-theme="dark"] .owner-toggle {
  background: #1f2933;
  color: #e5e7eb;
}

:root[data-theme="dark"] .owner-toggle-status {
  color: #9ca3af;
}

@media print {
  /* Printing expands the sandboxed frame to its full content height (see
     printFullHeight in sandbox.js) so the PDF paginates instead of clipping to one
     page. These undo the on-screen sizing that would otherwise fight it. */
  body.agentgate-printing-app .shell-viewer {
      height: auto !important;
      min-height: 0 !important;
      display: block !important;
    }
  
  body.agentgate-printing-app .app-frame,
  body.agentgate-printing-app .shell-frame {
      flex: none !important;
      width: 100% !important;
    }
  
  pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  
  h1,
  h2,
  h3,
  h4 {
      break-after: avoid;
    }
}