/* Shared theme for the browser demos, mirroring the quiltlang.github.io site
 * (docs-site/src/css/custom.css): the brand orange, the GitHub-dark surfaces,
 * and the per-glyph syntax colours. Both demo pages link it, and the playground
 * links it from the *generated* preview HTML (via a relative href) so the
 * rendered output is themed like the site without inlining any styles. */

:root {
  /* Quilt brand */
  --quilt-orange:   #f97316;
  --quilt-orange-2: #fb923c;
  /* GitHub-dark surfaces (the site's dark mode) */
  --quilt-bg:       #0d1117;
  --quilt-surface:  #161b22;
  --quilt-surface-2:#1c2128;  /* card surface (matches the site's landing cards) */
  --quilt-elevated: #21262d;  /* buttons / raised controls (GitHub-dark) */
  --quilt-border:   #30363d;
  --quilt-text:     #c9d1d9;
  --quilt-heading:  #f0f6fc;
  --quilt-muted:    #8b949e;

  /* Syntax token colours — same palette as the site's .token.quilt-* rules */
  --tok-comment: #8b949e;
  --tok-string:  #a5d6ff;
  --tok-keyword: #ff7b72;
  --tok-number:  #79c0ff;
  --tok-type:    #ffa657;
  --glyph-quote:   #f97316;
  --glyph-unquote: #60a5fa;
  --glyph-lift:    #facc15;
  --glyph-reduce:  #c084fc;
  --glyph-emit:    #34d399;
}

/* ── Rendered HTML output (the cards the demos generate) ─────────────────── */
/* Themed like the site's dark landing page so a generated page looks on-brand
 * rather than like a plain white document — surface-2 cards on the GitHub-dark
 * background, with the brand orange picked up on hover (as on the homepage). */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  margin: 0;
  padding: 1.5rem;
  color: var(--quilt-text);
  background: var(--quilt-bg);
  line-height: 1.6;
}
.cards { display: grid; gap: 1rem; max-width: 760px; margin: 0 auto; }
.card {
  background: var(--quilt-surface-2);
  border: 1px solid var(--quilt-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  transition: border-color .15s;
}
.card:hover { border-color: var(--quilt-orange); }
.card h2 { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--quilt-heading); }
.card p  { margin: 0; color: var(--quilt-muted); }
.card ul { margin: .3rem 0 0; padding-left: 1.2rem; color: var(--quilt-muted); }
.card li { margin: .15rem 0; }
.card a  { color: var(--quilt-orange-2); text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* ── Live dashboard output (the staged playground demo) ─────────────────────
 * Scoped to .preview (the iframe body). A terminal look: monospace ASCII meter
 * bars, palette cycled by position. */
.preview { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1.1rem 1.3rem; }
.preview h1 {
  font-size: .9rem; font-weight: 600; letter-spacing: .04em;
  color: var(--quilt-heading); margin: 0 0 1rem;
  border-bottom: 1px solid var(--quilt-border); padding-bottom: .6rem;
}
.preview .bar {
  display: grid; grid-template-columns: 7rem 1fr 5rem;
  align-items: center; gap: .9rem; margin: .4rem 0; font-size: 13px;
}
.preview .lbl { color: var(--quilt-muted); }
/* Solid bar: a full-width track with a proportional fill (width set inline). */
.preview .track { background: var(--quilt-surface); border: 1px solid var(--quilt-border); border-radius: 4px; height: .8rem; overflow: hidden; }
.preview .fill { display: block; height: 100%; border-radius: 3px; transition: width .8s linear; }
.preview .val { text-align: right; color: var(--quilt-heading); font-variant-numeric: tabular-nums; }
.preview .bar:nth-of-type(4n+1) .fill { background: var(--glyph-quote); }
.preview .bar:nth-of-type(4n+2) .fill { background: var(--glyph-unquote); }
.preview .bar:nth-of-type(4n+3) .fill { background: var(--glyph-emit); }
.preview .bar:nth-of-type(4n)   .fill { background: var(--glyph-reduce); }

/* ── Syntax highlighting tokens (used by the playground editor overlay) ──── */
.tok-comment { color: var(--tok-comment); font-style: italic; }
.tok-string  { color: var(--tok-string); }
.tok-keyword { color: var(--tok-keyword); }
.tok-number  { color: var(--tok-number); }
.tok-type    { color: var(--tok-type); }
.glyph-quote   { color: var(--glyph-quote);   font-weight: 700; }
.glyph-unquote { color: var(--glyph-unquote); font-weight: 700; }
.glyph-lift    { color: var(--glyph-lift);    font-weight: 700; }
.glyph-reduce  { color: var(--glyph-reduce);  font-weight: 700; }
.glyph-emit    { color: var(--glyph-emit);    font-weight: 700; }