/* Shared appearance for every page. Keep layout and diagram semantics local. */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f7f9fa;
  --ink: #171d20;
  --muted: #687277;
  --line: #e0e5e9;
  --line-strong: #aab5bd;
  --on-accent: #ffffff;
  --backdrop: rgba(23, 29, 32, .24);

  --blue: #315ee7;
  --blue-rgb: 49, 94, 231;
  --violet: #7559d8;
  --violet-rgb: 117, 89, 216;
  --gold: #9d7847;
  --gold-rgb: 157, 120, 71;
  --orange: #e45f2b;
  --orange-rgb: 228, 95, 43;
  --teal: #127c73;
  --teal-rgb: 18, 124, 115;
  --sky: #216b98;
  --sky-rgb: 33, 107, 152;

  --accent: var(--blue);
  --accent-rgb: var(--blue-rgb);
  --accent-soft: rgba(var(--accent-rgb), .07);
  --accent-line: rgba(var(--accent-rgb), .32);
  --focus-ring: rgba(var(--accent-rgb), .55);
  --model-highlight: rgba(var(--accent-rgb), .07);
  --model-stroke: 1.25;
  --model-focus-stroke: 2;

  --radius-small: 6px;
  --radius-control: 8px;
  --radius-panel: 16px;
  --radius-large: 20px;
  --shadow: none;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html { min-width: 320px; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}