/* Colors and fonts. Light uses Dracula hues in pastel tones, dark uses Dracula.
   Everything else reads these variables, so a theme is just a new block of values. */

/* Light theme (the default) */
:root {
  --font: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* surfaces */
  --bg: #F1EFF8;          /* page */
  --panel: #FBFAFE;       /* panels and cards */
  --canvas: #FBFAFE;      /* diagram background */
  --soft: #ECE9F6;        /* buttons and chips */
  --tile: #FBFAFE;        /* tape cells */

  /* text and lines */
  --ink: #2F3142;
  --muted: #6B6F8F;
  --line: #D9D5EA;
  --accent: #B84C8C;      /* title and headings */

  /* selection (purple) */
  --sel: #7F63C7;
  --sel-soft: #E4DCF7;
  --on-sel: #FFFFFF;      /* text on top of --sel */

  /* running (orange) */
  --run: #B2661F;
  --run-soft: #FBE6CF;
  --on-run: #FFFFFF;

  /* accepted (green) and rejected (red) */
  --ok: #2F8A50;
  --ok-soft: #D8F1E0;
  --bad: #D2514F;
  --bad-soft: #FBDDE0;

  color-scheme: light;
}

/* Dark theme (Dracula): the same variables with new values */
:root[data-theme="dark"] {
  /* surfaces */
  --bg: #21222C;
  --panel: #282A36;
  --canvas: #282A36;
  --soft: #343746;
  --tile: #282A36;

  /* text and lines */
  --ink: #F8F8F2;
  --muted: #8B98C6;
  --line: #44475A;
  --accent: #FF79C6;

  /* selection (purple) */
  --sel: #BD93F9;
  --sel-soft: #44475A;
  --on-sel: #282A36;

  /* running (orange) */
  --run: #FFB86C;
  --run-soft: #4F4640;
  --on-run: #282A36;

  /* accepted (green) and rejected (red) */
  --ok: #50FA7B;
  --ok-soft: #2E4A3B;
  --bad: #FF5555;
  --bad-soft: #4F3142;

  color-scheme: dark;
}