@layer tokens {
  :root {
    --brand-50: oklch(0.985 0.007 243);
    --brand-100: oklch(0.96 0.019 243);
    --brand-200: oklch(0.92 0.039 243);
    --brand-300: oklch(0.86 0.070 243);
    --brand-400: oklch(0.74 0.136 243);
    --brand-500: oklch(0.62 0.147 243);
    --brand-600: oklch(0.52 0.123 243);
    --brand-700: oklch(0.42 0.100 243);
    --brand-800: oklch(0.32 0.076 243);
    --brand-900: oklch(0.22 0.052 243);
    --brand-950: oklch(0.14 0.033 243);
    --accent: var(--brand-600);
    --accent-deep: var(--brand-700);
    --accent-soft: var(--brand-50);
    --accent-ink: #ffffff;
    --accent-edge: var(--brand-200);
    --link-c: 0.123;
    --link-h: 243;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --accent: var(--brand-400);
      --accent-deep: var(--brand-300);
      --accent-soft: var(--brand-900);
      --accent-ink: var(--brand-950);
      --accent-edge: var(--brand-700);
    }
  }

  :root[data-theme="dark"] {
    --accent: var(--brand-400);
    --accent-deep: var(--brand-300);
    --accent-soft: var(--brand-900);
    --accent-ink: var(--brand-950);
    --accent-edge: var(--brand-700);
  }
}