:root {
  color-scheme: light;
  --surface-1: #ffffff;
  --surface-2: #f6f6f4;
  --surface-3: #eeede9;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #8b8a84;
  --gridline: #e4e3dd;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.08);
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05), 0 1px 1px rgba(11, 11, 11, 0.03);
  --shadow-md: 0 6px 16px rgba(11, 11, 11, 0.08), 0 2px 4px rgba(11, 11, 11, 0.04);
  --danger: #e34948;
  --danger-ink: #9c1f1e;

  --cell-empty: #e6e5df;

  --hue-green: #008300;
  --hue-green-dark: #1fae1f;
  --hue-blue: #2a78d6;
  --hue-blue-dark: #3987e5;
  --hue-purple: #4a3aa7;
  --hue-purple-dark: #9085e9;
  --hue-orange: #eb6834;
  --hue-orange-dark: #d95926;
  --hue-red: #e34948;
  --hue-red-dark: #e66767;
  --hue-teal: #1baf7a;
  --hue-teal-dark: #199e70;

  --accent: var(--hue-green);
  --accent-ink: #ffffff;
  --accent-wash: rgba(0, 131, 0, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #1c1c1b;
    --surface-2: #121212;
    --surface-3: #262625;
    --text-primary: #f5f5f3;
    --text-secondary: #c3c2b7;
    --text-muted: #8b8a84;
    --gridline: #2e2e2c;
    --baseline: #3a3a37;
    --border: rgba(255, 255, 255, 0.09);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.4);
    --cell-empty: #2c2c2a;

    --hue-green: var(--hue-green-dark);
    --hue-blue: var(--hue-blue-dark);
    --hue-purple: var(--hue-purple-dark);
    --hue-orange: var(--hue-orange-dark);
    --hue-red: var(--hue-red-dark);
    --hue-teal: var(--hue-teal-dark);

    --accent: var(--hue-green);
    --accent-ink: #06210a;
    --accent-wash: rgba(31, 174, 31, 0.16);
  }
}

:root[data-theme="obsidian"] {
  color-scheme: dark;
  --surface-1: #14161c;
  --surface-2: #0c0d11;
  --surface-3: #1c1f27;
  --text-primary: #e3e6ef;
  --text-secondary: #a9afc0;
  --text-muted: #6b7183;
  --gridline: #22252e;
  --baseline: #2c2f3a;
  --border: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5);
  --cell-empty: #1c1f27;

  --hue-green: var(--hue-green-dark);
  --hue-blue: var(--hue-blue-dark);
  --hue-purple: var(--hue-purple-dark);
  --hue-orange: var(--hue-orange-dark);
  --hue-red: var(--hue-red-dark);
  --hue-teal: var(--hue-teal-dark);

  --accent: #4d8dff;
  --accent-ink: #06101f;
  --accent-wash: rgba(77, 141, 255, 0.14);
}