:root {
  --paper: #f5f4ef;
  --card: #ffffff;
  --ink: #15151a;
  --ink-2: #44444f;
  --mute: #767684;
  --rule: #dcd9cd;
  --sign: #15151a;
  --sign-ink: #f5f4ef;
  --board: #101114;
  --board-2: #1a1c21;
  --amber: #ffb81c;

  --red: #e5202e;
  --green: #0a9e5c;
  --blue: #1f5fd6;
  --yellow: #f6b800;
  --purple: #7a3fc4;
  --red-t: #fbdadd;
  --green-t: #d6f0e3;
  --blue-t: #d9e5fa;
  --yellow-t: #fdf0c4;
  --purple-t: #e8dcf6;

  --font-display: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Albert Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, Consolas, monospace;

  --r: 12px;
  --shadow: 0 1px 0 rgba(21, 21, 26, .05), 0 10px 28px -14px rgba(21, 21, 26, .25);
  --wrap: 1200px;

  /* layered page backdrop: three light pools + the faded metro-map tile (Moleculine's own pattern) */
  --pool-a: rgba(31, 95, 214, .10);
  --pool-b: rgba(255, 184, 28, .16);
  --pool-c: rgba(229, 32, 46, .07);
  --map-alpha: .075;
  --map-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='none' stroke='%2315151a' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='9' d='M-20 72H130l48 48H440'/%3E%3Cpath stroke-width='9' d='M70-20V160l48 48V440'/%3E%3Cpath stroke-width='9' d='M-20 300H230l48-48H440'/%3E%3Cpath stroke-width='3' stroke-dasharray='7 7' d='M300 120C300 190 330 190 330 252'/%3E%3Cg stroke-width='4' fill='%23f5f4ef'%3E%3Ccircle cx='130' cy='72' r='10'/%3E%3Ccircle cx='300' cy='120' r='10'/%3E%3Ccircle cx='70' cy='72' r='14'/%3E%3Ccircle cx='118' cy='330' r='10'/%3E%3Ccircle cx='330' cy='252' r='10'/%3E%3Ccircle cx='170' cy='300' r='10'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  --paper: #0f1013;
  --card: #1a1b20;
  --ink: #f2f1ea;
  --ink-2: #c4c3bd;
  --mute: #9393a0;
  --rule: #2b2c33;
  --sign: #08080a;
  --sign-ink: #f2f1ea;
  --board: #050506;
  --board-2: #121316;
  --red-t: #3a1519;
  --green-t: #10281d;
  --blue-t: #14213d;
  --yellow-t: #3a2f0a;
  --purple-t: #281a3d;
  --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --pool-a: rgba(31, 95, 214, .16);
  --pool-b: rgba(255, 184, 28, .09);
  --pool-c: rgba(229, 32, 46, .08);
  --map-alpha: .07;
  --map-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='none' stroke='%23f2f1ea' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='9' d='M-20 72H130l48 48H440'/%3E%3Cpath stroke-width='9' d='M70-20V160l48 48V440'/%3E%3Cpath stroke-width='9' d='M-20 300H230l48-48H440'/%3E%3Cpath stroke-width='3' stroke-dasharray='7 7' d='M300 120C300 190 330 190 330 252'/%3E%3Cg stroke-width='4' fill='%230f1013'%3E%3Ccircle cx='130' cy='72' r='10'/%3E%3Ccircle cx='300' cy='120' r='10'/%3E%3Ccircle cx='70' cy='72' r='14'/%3E%3Ccircle cx='118' cy='330' r='10'/%3E%3Ccircle cx='330' cy='252' r='10'/%3E%3Ccircle cx='170' cy='300' r='10'/%3E%3C/g%3E%3C/svg%3E");
}

.l-red { --lc: var(--red); --lt: var(--red-t); --lon: #fff; }
.l-green { --lc: var(--green); --lt: var(--green-t); --lon: #fff; }
.l-blue { --lc: var(--blue); --lt: var(--blue-t); --lon: #fff; }
.l-yellow { --lc: var(--yellow); --lt: var(--yellow-t); --lon: #15151a; }
.l-purple { --lc: var(--purple); --lt: var(--purple-t); --lon: #fff; }
.l-ink { --lc: var(--ink); --lt: var(--rule); --lon: var(--paper); }