:root {
  color-scheme: dark light;

  --bg: #0F1318;
  --bg-raised: #151A21;
  --panel: #161616;
  --card: #1E1E1E;
  --window-bar: #262626;
  --ink: #ECEAE6;
  --ink-2: rgba(236, 234, 230, .64);
  --ink-3: rgba(236, 234, 230, .52);
  --line: rgba(255, 255, 255, .10);
  --fill-soft: rgba(255, 255, 255, .06);
  --accent: #FF6B5F;
  --accent-soft: rgba(255, 107, 95, .16);
  --select: rgba(64, 128, 255, .40);
  --shadow-panel: 0 24px 64px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .30);
  --shadow-window: 0 16px 40px rgba(0, 0, 0, .40);
  --toast-demo-scale: .8;
  --toast-bg: rgb(22, 22, 22);
  --toast-line: rgba(255, 255, 255, .12);
  --toast-hint-fill: rgba(255, 255, 255, .10);

  --traffic-red: #FF5F57;
  --traffic-yellow: #FEBC2E;
  --traffic-green: #28C840;
  --button-ink: #16191D;
  --button-bg: #FF6B5F;

  --font-display: "Newsreader", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --type-h1: clamp(2.75rem, 5.6vw, 5rem);
  --type-h2: clamp(2rem, 3.8vw, 3.25rem);
  --type-h3: 1.5rem;
  --type-lead: 1.25rem;
  --type-body: 1.0625rem;
  --type-small: .875rem;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --radius-window: 10px;
  --radius-quick: 16px;
  --radius-search: 14px;
  --radius-toast: 12px;
  --radius-card: 12px;
  --radius-button: 10px;
  --radius-keycap: 6px;
  --radius-keycap-small: 4px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-fast: 150ms;
  --t-out: 200ms;
  --t-toast: 320ms;
  --t-scene: 600ms;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #EEF1F4;
    --bg-raised: #E3E8ED;
    --panel: #FBFBFB;
    --card: #FFFFFF;
    --window-bar: #ECECEC;
    --ink: #16191D;
    --ink-2: rgba(22, 25, 29, .74);
    --ink-3: rgba(22, 25, 29, .62);
    --line: rgba(0, 0, 0, .10);
    --fill-soft: rgba(0, 0, 0, .04);
    --accent: #E5483C;
    --button-bg: #C23A30;
    --button-ink: #FFFFFF;
    --accent-soft: rgba(229, 72, 60, .12);
    --select: rgba(0, 100, 255, .22);
    --shadow-panel: 0 24px 64px rgba(20, 30, 40, .18), 0 2px 8px rgba(20, 30, 40, .10);
    --shadow-window: 0 16px 40px rgba(20, 30, 40, .14);
    --toast-bg: rgb(251, 251, 251);
    --toast-line: rgba(0, 0, 0, .10);
    --toast-hint-fill: rgba(0, 0, 0, .10);
  }
}