@layer tokens {
  :root {
    --canvas: #e7eaf1;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --inset: #eef0f5;
    --border: #dfe3ea;
    --border-strong: #c2c9d6;
    --ink: #0e1116;
    --ink-2: #39414e;
    --muted: #59616f;

    --accent: #2b48c8;
    --accent-hover: #1f36a0;
    --accent-soft: #e4e9ff;
    --accent-ink: #1b2f86;
    --on-accent: #ffffff;

    --data: #5f6d88;

    --success: #16745a;
    --success-soft: #dff0e9;
    --danger: #b3283a;
    --danger-soft: #fbe4e7;
    --warning: #8a6011;
    --warning-soft: #f7ead2;
    --info: #2f6484;
    --info-soft: #e2edf4;
    --on-status: #ffffff;

    --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Clash Display", "Geist", ui-sans-serif, system-ui, sans-serif;
    --display-word-space: 0.05em;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --line-sm: calc(var(--text-sm) * 1.45);
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-title: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

    --tap: 2.75rem;
    --tap-control: 2.5rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --r-1: 0.375rem;
    --r-2: 0.625rem;
    --r-3: 1rem;
    --r-4: 1.375rem;
    --r-full: 999px;

    --ring: inset 0 0 0 1px rgba(14, 17, 22, 0.07);
    --ring-strong: inset 0 0 0 1px rgba(14, 17, 22, 0.12);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);

    --shadow-1: 0 1px 2px rgba(14, 20, 34, 0.05), 0 1px 3px -1px rgba(14, 20, 34, 0.06);
    --shadow-2: 0 18px 40px -22px rgba(14, 20, 34, 0.28), 0 4px 12px -6px rgba(14, 20, 34, 0.1);
    --shadow-3: 0 44px 88px -36px rgba(14, 20, 34, 0.38), 0 10px 24px -12px rgba(14, 20, 34, 0.16);

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-1: 160ms;
    --dur-2: 280ms;
    --dur-3: 460ms;

    --header-h: 3.5rem;
    --page-max: 94rem;
    --prose-max: 42rem;

    --z-sticky: 20;
    --z-overlay: 40;
    --z-toast: 60;
  }

  [data-theme="dark"] {
    --canvas: #07090d;
    --surface: #14181f;
    --surface-raised: #1a1f28;
    --inset: #232935;
    --border: #262c37;
    --border-strong: #3a4250;
    --ink: #eef1f7;
    --ink-2: #c3cad6;
    --muted: #98a2b1;

    --accent: #8aa3ff;
    --accent-hover: #a5b8ff;
    --accent-soft: #182248;
    --accent-ink: #dde4ff;
    --on-accent: #0a0e1c;

    --data: #808b9f;

    --success: #63cba5;
    --success-soft: #10261f;
    --danger: #f1899a;
    --danger-soft: #2c151b;
    --warning: #dcae5e;
    --warning-soft: #2a2113;
    --info: #86b6d6;
    --info-soft: #142430;
    --on-status: #0a0e1c;

    --ring: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    --ring-strong: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 18px 40px -22px rgba(0, 0, 0, 0.8), 0 4px 12px -6px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 44px 88px -36px rgba(0, 0, 0, 0.88), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
      --canvas: #07090d;
      --surface: #14181f;
      --surface-raised: #1a1f28;
      --inset: #232935;
      --border: #262c37;
      --border-strong: #3a4250;
      --ink: #eef1f7;
      --ink-2: #c3cad6;
      --muted: #98a2b1;

      --accent: #8aa3ff;
      --accent-hover: #a5b8ff;
      --accent-soft: #182248;
      --accent-ink: #dde4ff;
      --on-accent: #0a0e1c;

      --data: #808b9f;

    --success: #63cba5;
      --success-soft: #10261f;
      --danger: #f1899a;
      --danger-soft: #2c151b;
      --warning: #dcae5e;
      --warning-soft: #2a2113;
      --info: #86b6d6;
      --info-soft: #142430;
      --on-status: #0a0e1c;

      --ring: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
      --ring-strong: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
      --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

      --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow-2: 0 18px 40px -22px rgba(0, 0, 0, 0.8), 0 4px 12px -6px rgba(0, 0, 0, 0.55);
      --shadow-3: 0 44px 88px -36px rgba(0, 0, 0, 0.88), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
    }
  }
}