@layer tokens {
  :root {
    color-scheme: light;

    --color-canvas: #e5e3d2;
    --color-surface: #faf9f1;
    --color-surface-subtle: #d9d7c5;
    --color-surface-raised: #f1efe2;
    --color-border: #c4c1ad;
    --color-border-strong: #8d8a78;

    --color-ink: #161616;
    --color-ink-muted: #555348;
    --color-ink-faint: #6d6a5c;

    --color-accent: #ff5b19;
    --color-accent-hover: #d9470e;
    --color-accent-solid: #ff5b19;
    --color-accent-solid-hover: #e64b0d;
    --color-accent-soft: #ffd7c6;
    --color-accent-ink: #7a2808;
    --color-link: #31565a;
    --color-link-hover: #161616;
    --color-on-accent: #161616;
    --color-brand-blue: #aecacd;
    --color-brand-coral: #e87461;
    --color-brand-dark: #161616;

    --color-success: #177245;
    --color-success-soft: #e5f4ec;
    --color-warning: #8a5500;
    --color-warning-soft: #fff2d6;
    --color-danger: #9a2f20;
    --color-danger-soft: #f8d8d1;
    --color-critical: #832537;
    --color-critical-soft: #f3d5dc;
    --color-info: #31565a;
    --color-info-soft: #d7e6e7;
    --color-muted-soft: #dcdac9;

    --color-focus: #ff5b19;
    --color-focus-offset: #faf9f1;

    --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --font-size-body: 1rem;
    --font-size-small: .875rem;
    --font-size-metadata: .75rem;
    --font-size-label: .8125rem;
    --font-size-title: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
    --font-size-display: clamp(2.35rem, 1.4rem + 3.2vw, 4.25rem);
    --line-height-body: 1.55;
    --line-height-tight: 1.15;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --radius-control: .375rem;
    --radius-card: .625rem;
    --radius-panel: .875rem;
    --radius-pill: 999px;

    --shadow-card: 0 1px 2px rgb(22 22 22 / .08);
    --shadow-floating: 0 12px 32px rgb(22 22 22 / .16);

    --content-width: 76rem;
    --reading-width: 48rem;
    --sidebar-width: 16rem;
    --focus-ring: 0 0 0 3px var(--color-focus-offset), 0 0 0 6px var(--color-focus);
  }

  :root[data-theme="light"] {
    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --color-canvas: #161616;
      --color-surface: #211f1c;
      --color-surface-subtle: #2d2a25;
      --color-surface-raised: #26231f;
      --color-border: #48443b;
      --color-border-strong: #716c5d;
      --color-ink: #f3f0df;
      --color-ink-muted: #c4c0af;
      --color-ink-faint: #a5a18f;
      --color-accent: #ff7a45;
      --color-accent-hover: #ff9a73;
      --color-accent-solid: #ff5b19;
      --color-accent-solid-hover: #ff7540;
      --color-accent-soft: #4c281d;
      --color-accent-ink: #ff9a73;
      --color-link: #aecacd;
      --color-link-hover: #e5e3d2;
      --color-on-accent: #161616;
      --color-brand-blue: #aecacd;
      --color-brand-coral: #ef8d7c;
      --color-brand-dark: #161616;
      --color-success: #65c694;
      --color-success-soft: #173a29;
      --color-warning: #e3b45b;
      --color-warning-soft: #3b2e18;
      --color-danger: #f09a8c;
      --color-danger-soft: #472820;
      --color-critical: #f28a9a;
      --color-critical-soft: #45232b;
      --color-info: #aecacd;
      --color-info-soft: #24383a;
      --color-muted-soft: #302e29;
      --color-focus-offset: #161616;
      --shadow-card: 0 1px 2px rgb(0 0 0 / .34), 0 8px 24px rgb(0 0 0 / .18);
      --shadow-floating: 0 12px 32px rgb(0 0 0 / .38);
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --color-border: var(--color-border-strong);
      --color-ink-muted: var(--color-ink);
      --shadow-card: none;
      --shadow-floating: none;
    }
  }
}