/* The ONLY place that knows the website's variables. Maps --mg-* tokens onto the mockup's
   palette (navy + burgundy, blue = structure, burgundy = the differentiator). Light/dark
   follow automatically because the site redefines its own variables for [data-theme="dark"]. */
.mg-widget {
  --mg-ink: var(--ink);
  --mg-muted: var(--muted);
  --mg-surface: var(--surface);
  --mg-line: var(--line);
  --mg-hover: var(--tint);
  --mg-board-bg: var(--tint-cool);
  --mg-cell-bg: var(--surface);
  --mg-head: var(--ink);
  --mg-body: var(--blue);
  --mg-apple: var(--burg);
  --mg-bar-track: var(--tint-cool);
  --mg-bar-fill: var(--blue);
  --mg-bar-best: var(--burg);
  --mg-btn-border: var(--ink);
  --mg-focus: var(--blue);
  --mg-error: var(--burg-text);
  --mg-font: var(--f-body);
  --mg-font-mono: var(--f-mono);
  --mg-pad-size: clamp(240px, 80vw, 320px); /* one size for every game's play area */
}