:root {
  --cyan: #00aeef;
  --magenta: #ec0c8c;
  --yellow: #ffd100;
  --green: #1e9e5a;
  --red: #dd3b3b;
  --radius: 16px;
  --radius-sm: 10px;
  --display: 'Roboto', sans-serif;
  --body: 'Roboto', sans-serif;
  --mono: 'Roboto Mono', monospace;
  --deck: #12141c;
  --deck-fg: #f4f4f6;
  --paper: #f7f7f9;
  --paper-dim: #eeeef2;
  --panel: #fff;
  --panel-glass: rgba(255, 255, 255, .66);
  --ink: #14151a;
  --ink-soft: #585c66;
  --ink-faint: #8b8f99;
  --line: rgba(20, 21, 26, .11);
  --line-strong: rgba(20, 21, 26, .24);
  --grain: rgba(20, 21, 26, .045);
  --shadow: 0 1px 2px rgba(20, 21, 26, .05), 0 14px 34px -16px rgba(20, 21, 26, .22);
  --glow-c: rgba(0, 174, 239, .16);
  --glow-m: rgba(236, 12, 140, .14);
  --glow-y: rgba(255, 209, 0, .18);
}
html[data-theme="dark"] {
  --paper: #0a0b10;
  --paper-dim: #12131a;
  --panel: #14161f;
  --panel-glass: rgba(22, 24, 33, .72);
  --ink: #f3f4f7;
  --ink-soft: #a6aab6;
  --ink-faint: #6c7180;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .18);
  --grain: rgba(255, 255, 255, .045);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 20px 46px -18px rgba(0, 0, 0, .65);
  --glow-c: rgba(0, 174, 239, .22);
  --glow-m: rgba(236, 12, 140, .2);
  --glow-y: rgba(255, 209, 0, .22);
}