/* Design tokens — the ONLY place colours, fonts, radii and shadows are defined.
   The art director fills in every value for this app's direction. Keep every variable name.
   Light values go in :root; dark values in BOTH dark blocks (keep them identical). */

@import url("https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Inter:wght@400;600&family=VT323&display=swap");

:root {
  color-scheme: light dark;

  /* colour */
  --bg: #c3c3c3;            /* page background — grey desktop (11.9:1 with --text) */
  --surface: #ffffff;       /* window bodies, list boxes, inputs */
  --surface-2: #e4e4e4;     /* button faces, off cells, hover rows */
  --text: #000000;          /* primary text */
  --text-muted: #3d3d3d;    /* status bar, captions (6.1:1 on --bg) */
  --border: #000000;        /* 1px outlines */
  --accent: #b0006b;        /* system highlight: title bar, lit cells, Play */
  --accent-contrast: #ffffff; /* 6.9:1 on --accent */
  --danger: #b00000;
  --success: #006e00;
  --focus: #0000a8;         /* dotted focus outline */

  /* type */
  --font-display: "Silkscreen", "Courier New", monospace;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "VT323", ui-monospace, "SF Mono", Menlo, monospace;
  --weight-display: 400;
  --tracking-display: 0;
  --case-label: uppercase;        /* none | uppercase */
  --tracking-label: 0.04em;
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-md: 0.9375rem;   --text-lg: 1.25rem;
  --text-xl: 1.75rem;  --text-2xl: 2.5rem;  --text-3xl: 4.5rem;
  --leading: 1.45;

  /* space (4px scale) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --container: 40rem;

  /* shape */
  --radius-s: 0; --radius-m: 0; --radius-l: 0;
  --border-w: 1px;
  --shadow: 2px 2px 0 #000000;            /* hard offset under windows */
  --shadow-press: inset 2px 2px 0 #808080; /* sunken bevel while pressed */

  /* motion — stepped, never smooth */
  --ease: steps(4, end);
  --dur-fast: 80ms;
  --dur: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a; --surface: #1e1e1e; --surface-2: #303030; --text: #f2f2f2; --text-muted: #a8a8a8; --border: #3ddc84;
    --accent: #ff4fb3; --accent-contrast: #000000; --danger: #ff6464; --success: #3ddc84; --focus: #ffff55; --shadow: 2px 2px 0 #1f6e42;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0a0a; --surface: #1e1e1e; --surface-2: #303030; --text: #f2f2f2; --text-muted: #a8a8a8; --border: #3ddc84;
  --accent: #ff4fb3; --accent-contrast: #000000; --danger: #ff6464; --success: #3ddc84; --focus: #ffff55; --shadow: 2px 2px 0 #1f6e42;
}