@layer tokens {
  :root {
    color-scheme: light dark;
    --font-sans: 'Noto Sans SC Variable', sans-serif;
    --font-serif: 'Noto Serif SC Variable', serif;
    --font-mono: 'Geist Mono Variable', monospace;
    --gray-100: light-dark(#fdfdfc, #111110);
    --gray-200: light-dark(#f9f9f8, #191918);
    --gray-300: light-dark(#f1f0ef, #222221);
    --gray-400: light-dark(#e9e9e7, #2a2a28);
    --gray-1100: light-dark(#43423d, #b5b3ad);
    --gray-1200: light-dark(#21201c, #ffffff);
    --hover-fill: var(--gray-300);
    --row-line: var(--gray-300);
    --paper: var(--gray-100);
    --paper-raised: light-dark(#ffffff, #111110);
    --paper-muted: var(--gray-300);
    --ink: var(--gray-1200);
    --ink-soft: var(--gray-1100);
    --ink-faint: var(--gray-1100);
    --line: var(--gray-400);
    --blue: light-dark(#0d74ce, #70b8ff);
    --blue-soft: light-dark(#e6f4fe, #0d2847);
    --green: light-dark(#2a7e3b, #71d083);
    --green-soft: light-dark(#e9f6e9, #1b2a1e);
    --contribution-1: light-dark(#c9e8ca, #25482d);
    --contribution-2: light-dark(#94ce9a, #366740);
    --contribution-3: #46a758;
    --contribution-4: var(--green);
    --brand: #fad657;
    --brand-ink: #473b1f;
    --focus: light-dark(#ffbf24, #e09f00);
    --selection: light-dark(#dfdfdc, #34332c);
    --code: var(--gray-200);
    --code-ink: var(--ink);
    --edge: light-dark(#00000014, #ffffff1a);
    --shadow-menu:
      0 0 0 1px var(--edge), 0 1px 1px #00000005, 0 4px 8px -4px #0000000a,
      0 16px 24px -8px #0000000f;
    --shadow-tooltip: 0 0 0 1px var(--edge), 0 1px 1px #00000005, 0 4px 8px #0000000a;
    --radius-inline: 4px;
    --radius-control: 8px;
    --radius-surface: 12px;
    --radius-card: 16px;
    --menu-inset: 4px;
    --type-label: 400 16px / 1.5 var(--font-sans);
    --type-body: 400 16px / 1.75 var(--font-sans);
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 7rem;
    --content: 36rem;
    --reading: 36rem;
    --index: 28.5rem;
    --type-display: 450 clamp(36px, 5vw, 44px) / 1.25 var(--font-serif);
    --type-title: 450 36px / 1.25 var(--font-serif);
    --type-section: 500 24px / 1.35 var(--font-serif);
    --type-item: 450 20px / 1.5 var(--font-serif);
    --duration-feedback: 120ms;
    --duration-exit: 140ms;
    --duration-reveal: 180ms;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  }
  :root[data-theme-switching='true'] {
    --duration-feedback: 0ms;
    --duration-exit: 0ms;
    --duration-reveal: 0ms;
  }
  :root[data-theme='light'] {
    color-scheme: light;
  }
  :root[data-theme='dark'] {
    color-scheme: dark;
  }
}