/**
 * Which visual tokens make every 2layers surface part of one system?
 */

:root {
  color-scheme: dark;
  --color-ground: #08090b;
  --color-surface: #111318;
  --color-surface-raised: #171a20;
  --color-paper: #f1efe8;
  --color-paper-bright: #f8f7f2;
  --color-ink: #111111;
  --color-copy: #42413e;
  --color-graphite: #72716c;
  --color-quiet: #a8a69f;
  --color-grid: #292a2e;
  --color-cobalt: #5f7cff;
  --color-vermilion: #ff5a36;
  --color-mint: #63e6be;
  --color-violet: #ad8cff;
  --color-rule-dark: rgb(248 247 242 / 20%);
  --color-rule-light: rgb(17 17 17 / 22%);
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --edge: clamp(1rem, 2.5vw, 2.5rem);
  --content-width: 92rem;
  --header-height: 4.5rem;
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;
  --space-7: 5.5rem;
  --space-8: 8rem;
  --rule: 1px;
  --focus-width: 2px;
  --motion-fast: 160ms;
  --motion-medium: 320ms;
  --motion-slow: 700ms;
  --ease-system: cubic-bezier(0.65, 0, 0.35, 1);
}