/* Default design tokens (neutral light palette). A host page overrides these, usually by
   mapping them onto its own variables (see themes/mockup.css). Components use only --mg-*. */
.mg-widget {
  /* text and surfaces */
  --mg-ink: #0b1c36;
  --mg-muted: #54637a;
  --mg-surface: #ffffff;
  --mg-line: #e3e7ed;
  --mg-hover: #eef1f5;
  /* board */
  --mg-board-bg: #eef1f5;
  --mg-cell-bg: #ffffff;
  --mg-head: #0b1c36;
  --mg-body: #356fbf;
  --mg-apple: #7a1f36;
  /* two-player boards (Connect 4): visitor, model, frame, winning-line ring */
  --mg-p1: var(--mg-body);
  --mg-p2: var(--mg-apple);
  --mg-p1-frame: var(--mg-board-bg);
  --mg-win-ring: var(--mg-head);
  /* drawing pad and model-input view */
  --mg-pad-bg: var(--mg-cell-bg);
  --mg-pad-ink: var(--mg-head);
  --mg-pad-size: clamp(240px, 80vw, 320px);
  /* probability bars */
  --mg-bar-track: #eef1f5;
  --mg-bar-fill: #356fbf;
  --mg-bar-best: #7a1f36;
  /* controls */
  --mg-btn-border: #0b1c36;
  --mg-focus: #356fbf;
  --mg-error: #7a1f36;
  /* type, shape, motion */
  --mg-font: system-ui, sans-serif;
  --mg-font-mono: ui-monospace, monospace;
  --mg-radius: 4px;
  --mg-radius-cell: 2px;
  --mg-gap: 12px;
  --mg-motion: 120ms;
}