@layer tokens {
  :root {
    color-scheme: light;
    --neutral-0: #fffcf5;
    --neutral-50: #f6f0e5;
    --neutral-100: #eee5d7;
    --neutral-200: #d9cdbd;
    --neutral-300: #c0b29f;
    --neutral-400: #9a8b79;
    --neutral-500: #776a5d;
    --neutral-600: #5c5048;
    --neutral-700: #473d37;
    --neutral-800: #382f2c;
    --neutral-900: #2d2525;
    --neutral-950: #211b1d;
    --accent-50: #fff5f8;
    --accent-100: #fbe5ed;
    --accent-200: #f4c5d6;
    --accent-300: #e88cac;
    --accent-400: #d65280;
    --accent-500: #bd255f;
    --accent-600: #941549;
    --accent-700: #74133b;
    --accent-800: #55142f;
    --accent-900: #3d1425;
    --success-strong: #296b49;
    --success-soft: #edf8f1;
    --warning-strong: #6f4e08;
    --warning-soft: #fff1bd;
    --danger-strong: #a42635;
    --danger-soft: #fceff0;
    --info-strong: #315f91;
    --info-soft: #eef5fb;
    --color-canvas: var(--neutral-50);
    --color-surface: var(--neutral-0);
    --color-surface-subtle: var(--neutral-100);
    --color-text: var(--neutral-950);
    --color-text-secondary: var(--neutral-600);
    --color-border: var(--neutral-200);
    --color-control-border: var(--neutral-500);
    --color-action: var(--accent-600);
    --color-action-hover: var(--accent-700);
    --color-action-active: var(--accent-800);
    --color-action-text: var(--neutral-0);
    --color-focus: var(--accent-500);
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-body: 1rem;
    --text-lead: 1.125rem;
    --text-h3: 1.25rem;
    --text-h2: 1.5rem;
    --text-h1: 2rem;
    --leading-tight: 1.25;
    --leading-ui: 1.4;
    --leading-body: 1.5;
    --weight-normal: 400;
    --weight-medium: 550;
    --weight-semibold: 650;
    --weight-bold: 750;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.7rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 240ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --content-public: 94rem;
    --content-admin: 96rem;
    --measure-prose: 70ch;
    --shadow-floating: 0 1rem 3rem #21191d1f;
    --shadow-instrument: inset 0 1px 0 #fffaf0, 0 2px 0 #cbbdac;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-dialog: 400;
    --z-toast: 500;
  }

  @supports (color: oklch(50% 0.1 300)) {
    :root {
      --neutral-0: oklch(99% 0.012 83);
      --neutral-50: oklch(96% 0.017 78);
      --neutral-100: oklch(92.5% 0.022 75);
      --neutral-200: oklch(85% 0.028 73);
      --neutral-300: oklch(76% 0.03 70);
      --neutral-400: oklch(63% 0.03 65);
      --neutral-500: oklch(50% 0.027 55);
      --neutral-600: oklch(39% 0.025 45);
      --neutral-700: oklch(31% 0.021 36);
      --neutral-800: oklch(25% 0.018 25);
      --neutral-900: oklch(20% 0.015 15);
      --neutral-950: oklch(15.5% 0.013 350);
      --accent-50: oklch(97% 0.018 350);
      --accent-100: oklch(93% 0.04 350);
      --accent-200: oklch(85% 0.08 350);
      --accent-300: oklch(74% 0.13 350);
      --accent-400: oklch(62% 0.17 350);
      --accent-500: oklch(51% 0.19 350);
      --accent-600: oklch(43% 0.16 350);
      --accent-700: oklch(36% 0.13 350);
      --accent-800: oklch(29% 0.1 350);
      --accent-900: oklch(23% 0.07 350);
      --success-strong: oklch(42% 0.115 152);
      --success-soft: oklch(96% 0.025 152);
      --warning-strong: oklch(40% 0.095 78);
      --warning-soft: oklch(95% 0.045 82);
      --danger-strong: oklch(45% 0.17 24);
      --danger-soft: oklch(96% 0.025 24);
      --info-strong: oklch(43% 0.105 245);
      --info-soft: oklch(96% 0.025 245);
      --shadow-floating: 0 1rem 3rem oklch(17% 0.009 335 / 0.12);
    }
  }
}