:root {
  color-scheme: dark;

  --paper: #0E1116;
  --raised: #161A21;
  --hover: #1C212A;
  --ink: #ECEEF2;
  --prose-ink: #DCE0E6;
  --muted: #B0B7C3;
  --muted-dim: #878F9D;
  --line: rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .22);
  --nav-bg: rgba(14, 17, 22, .85);
  --code-bg: #222833;

  --panel: #1A1F27;
  --panel-raised: #20262F;
  --panel-line: rgba(255, 255, 255, .12);
  --panel-line-strong: rgba(255, 255, 255, .24);
  --panel-ink: #F3F5F8;
  --panel-muted: #A9B1BE;

  --accent: #5AA4FF;
  --accent-deep: #7FB8FF;
  --accent-ink: #0A1020;
  --ok: #5FD08D;
  --warn: #E3B341;
  --danger: #F87171;
  --ok-soft: rgba(95, 208, 141, .14);
  --warn-soft: rgba(227, 179, 65, .14);
  --danger-soft: rgba(248, 113, 113, .14);
  --sale: #FF8A73;

  --ring: 0 0 0 1px rgba(255, 255, 255, .08);
  --ring-strong: 0 0 0 1px rgba(255, 255, 255, .16);
  --e-1: 0 1px 2px rgba(0, 0, 0, .34);
  --e-2: 0 2px 4px rgba(0, 0, 0, .32), 0 8px 18px -6px rgba(0, 0, 0, .46);
  --e-3: 0 4px 8px rgba(0, 0, 0, .34), 0 18px 36px -10px rgba(0, 0, 0, .58);
  --e-4: 0 8px 16px rgba(0, 0, 0, .40), 0 32px 64px -16px rgba(0, 0, 0, .70);

  --tint: color-mix(in oklab, var(--accent) 15%, var(--raised));
  --tint-strong: color-mix(in oklab, var(--accent) 24%, var(--raised));
  --scrim: rgba(0, 0, 0, .58);

  --accent-2: #A48BFF;
  --glow: color-mix(in oklab, var(--accent) 20%, transparent);
  --glow-2: color-mix(in oklab, var(--accent-2) 16%, transparent);
  --band: color-mix(in oklab, var(--accent) 5%, var(--paper));
  --spot: color-mix(in oklab, var(--accent) 12%, transparent);

  --code-surface: var(--panel);
  --code-raised: var(--panel-raised);
  --code-line: var(--panel-line);
  --code-ink: var(--panel-ink);
  --code-muted: var(--panel-muted);
  --code-comment: #8b949e;
  --code-keyword: #ff7b72;
  --code-string: #a5d6ff;
  --code-number: #79c0ff;
  --code-func: #d2a8ff;
  --code-name: #ffa657;
  --code-added: #56d364;
  --code-removed: #f85149;

  --rail-bg: #12151A;
  --rail-line: rgba(255, 255, 255, .07);
  --rail-hover: rgba(255, 255, 255, .05);
}

@media (prefers-contrast: more) {
  :root {
    --prose-ink: var(--ink);
    --muted: #CDD2DA;
    --muted-dim: #AEB5C1;
    --line: rgba(255, 255, 255, .24);
    --line-strong: rgba(255, 255, 255, .42);
    --code-comment: #B1BAC4;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}