/*
 * Tempra design tokens: the one place values live (TEMPRA-8). Deliberately plain for now, close to
 * browser defaults; the design pass (TEMPRA-1) changes values here and both the app and the site
 * follow. Light and dark come from the user's system through light-dark().
 */
:root {
  color-scheme: light dark;

  /* Color */
  --tempra-color-text: light-dark(#111111, #e8e8e8);
  --tempra-color-muted: light-dark(#555555, #a8a8a8);
  --tempra-color-bg: light-dark(#ffffff, #121212);
  --tempra-color-link: light-dark(#0000ee, #8ab4f8);
  --tempra-color-link-visited: light-dark(#551a8b, #c58af9);
  --tempra-color-border: light-dark(#cccccc, #444444);
  --tempra-color-code-bg: light-dark(#f4f4f4, #1e1e1e);

  /* Type */
  --tempra-font-body: system-ui, sans-serif;
  --tempra-font-mono: ui-monospace, monospace;
  --tempra-font-size: 1rem;
  --tempra-line-height: 1.5;
  --tempra-measure: 70ch;

  /* Space */
  --tempra-space-1: 0.25rem;
  --tempra-space-2: 0.5rem;
  --tempra-space-3: 1rem;
  --tempra-space-4: 2rem;

  /* Shape */
  --tempra-radius: 0;
}

/* Element defaults for every page of the app and the site; values come from tokens.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--tempra-space-3);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-font-size);
  line-height: var(--tempra-line-height);
}

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

a:visited {
  color: var(--tempra-color-link-visited);
}

code,
pre,
kbd,
samp {
  font-family: var(--tempra-font-mono);
}

hr {
  border: 0;
  border-top: 1px solid var(--tempra-color-border);
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: var(--tempra-space-1) var(--tempra-space-2);
  text-align: left;
  vertical-align: top;
}

img {
  max-width: 100%;
}

/*
 * How a rendered concept reads: the markdown body of a concept, in the app now and wherever
 * concepts are shown later (the site, inline MCP Apps views). Scoped to .prose.
 */
.prose {
  max-width: var(--tempra-measure);
}

.prose pre {
  overflow-x: auto;
  padding: var(--tempra-space-2);
  background: var(--tempra-color-code-bg);
  border-radius: var(--tempra-radius);
}

.prose blockquote {
  margin-left: 0;
  padding-left: var(--tempra-space-3);
  border-left: 3px solid var(--tempra-color-border);
  color: var(--tempra-color-muted);
}

.prose table th,
.prose table td {
  border: 1px solid var(--tempra-color-border);
}

.prose .footnotes {
  font-size: 0.9em;
  color: var(--tempra-color-muted);
}

/*
 * The concept reader (Wordgard, TEMPRA-11). Wordgard themes itself through --wg-* variables set
 * on its own element; these map them to Tempra's tokens and keep the body as plain as the rest of
 * the page. The selectors are one step more specific than Wordgard's injected theme.
 */
div.body > * {
  --wg-panel-color: var(--tempra-color-bg);
  --wg-border-color: var(--tempra-color-border);
  --wg-highlight-color: var(--tempra-color-link);
  --wg-dialog-font: inherit;
  border: 0;
}

div.body wg-content {
  padding: 0;
}

.tooltip {
  max-width: 32rem;
  padding: var(--tempra-space-1) var(--tempra-space-2);
  border: 1px solid var(--tempra-color-border);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
}

.prose a.broken {
  text-decoration-line: line-through;
}

.prose pre.raw,
.prose code.raw {
  color: var(--tempra-color-muted);
}

.toc {
  padding-left: var(--tempra-space-3);
}

.toc .depth-1 {
  margin-left: var(--tempra-space-3);
}

.toc .depth-2 {
  margin-left: var(--tempra-space-4);
}