:root {
  --col-bg: oklch(28.57% 0.0084 317.58);
  --col-bright-bg: oklch(25.57% 0.01 317.58);
  --col-fg: oklch(98.35% 0.0089 78.24);
  --col-bright-fg: oklch(100% 0.0134 78.24);
  --col-cursor: oklch(65.98% 0.0049 33.81);
  --col-black: oklch(28.57% 0.0084 317.58);
  --col-red: oklch(70.58% 0.1935 8.44);
  --col-green: oklch(83.61% 0.1421 130.74);
  --col-yellow: oklch(89.39% 0.1386 90.47);
  --col-blue: oklch(83.81% 0.0953 205.7);
  --col-purple: oklch(74.09% 0.1215 290.67);
  --col-orange: oklch(77.37% 0.1363 46.19);
  --col-white: oklch(98.35% 0.0089 78.24);
  --col-bright-black: oklch(17.56% 0.0231 326.47);
  --col-bright-red: oklch(65.27% 0.238 14.08);
  --col-bright-green: oklch(85.78% 0.2276 133.36);
  --col-bright-yellow: oklch(86.47% 0.1642 88.17);
  --col-bright-blue: oklch(84.89% 0.1375 207.27);
  --col-bright-purple: oklch(59.64% 0.2293 284.36);
  --col-bright-orange: oklch(71.78% 0.1854 43.66);
  --col-bright-white: oklch(65.98% 0.0049 33.81);
}

retro-board {
  background-color: var(--col-bg);
  background-image: radial-gradient(var(--col-fg), 1px, transparent 0);
  box-shadow:
    oklch(from var(--col-fg) l c h / 0.16) 0px 10px 36px 0px,
    oklch(from var(--col-fg) l c h / 0.06) 0px 0px 0px 1px;

  label {
    background: var(--col-bg);
  }

  card {
    background-color: oklch(0.9823 0.0756 109);
    color: oklch(0.3 0.1 250);

    box-shadow:
      oklch(0.5 0.1 109 / 0.4) 0px 2px 4px,
      oklch(0.5 0.1 109 / 0.3) 0px 7px 13px -3px,
      oklch(0.5 0.1 109 / 0.2) 0px -3px 0px inset;

    reaction {
      text-shadow: oklch(0 0 250 / 0.4) 0px 2px 4px;
    }
  }
}