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

    --color-canvas: #f3f5f9;
    --color-surface: #ffffff;
    --color-surface-subtle: #edf1f7;
    --color-surface-raised: #f8f9fc;
    --color-border: #dce2eb;
    --color-border-strong: #a4afbf;

    --color-ink: #172238;
    --color-ink-muted: #56647a;
    --color-ink-faint: #627087;
    --color-navigation: #152238;
    --color-navigation-ink: #d6e0ef;
    --color-navigation-selected: #2b3f5e;

    /* Vivid orange identifies Aglet; the darker action pair supports white text. */
    --color-accent: #e6551b;
    --color-accent-hover: #b83e10;
    --color-accent-solid: #e6551b;
    --color-accent-solid-hover: #b83e10;
    --color-accent-soft: #fbe5dc;
    --color-accent-ink: #87300f;

    --color-primary: #b83e10;
    --color-primary-hover: #99320b;
    --color-primary-active: #7c290a;
    --color-primary-soft: #fff0e8;
    --color-on-primary: #ffffff;
    --color-action: var(--color-primary);
    --color-action-hover: var(--color-primary-hover);
    --color-on-action: var(--color-on-primary);

    --color-link: #245bc5;
    --color-link-hover: #174397;
    --color-on-accent: #ffffff;
    --color-brand-blue: #aecacd;
    --color-brand-coral: #e87461;
    --color-brand-dark: #1d1f21;

    --color-success: #08764d;
    --color-success-soft: #e1f5eb;
    --color-warning: #875400;
    --color-warning-soft: #fff2cc;
    --color-danger: #b62936;
    --color-danger-soft: #ffe8eb;
    --color-critical: #a8192c;
    --color-critical-soft: #ffdee4;
    --color-info: #245bc5;
    --color-info-soft: #e6efff;
    --color-muted-soft: #edf1f7;

    --color-focus: #1f4b99;
    --color-focus-offset: #ffffff;

    --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: .9375rem;
    --font-size-small: .875rem;
    --font-size-metadata: .8125rem;
    --font-size-label: .875rem;
    --font-size-title: clamp(1.65rem, 1.4rem + .65vw, 1.875rem);
    --font-size-display: clamp(2.35rem, 1.4rem + 3.2vw, 4.25rem);
    --line-height-body: 1.5;
    --line-height-tight: 1.12;

    --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: .5rem;
    --radius-object: .625rem;
    --radius-card: var(--radius-object);
    --radius-panel: var(--radius-object);
    --radius-pill: 999px;

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

    --content-width: 76rem;
    --reading-width: 48rem;
    --sidebar-width: 13.5rem;
    --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: #141617;
      --color-surface: #1c1f21;
      --color-surface-subtle: #25292c;
      --color-surface-raised: #222629;
      --color-border: #363b3f;
      --color-border-strong: #626a70;
      --color-ink: #f1f2ef;
      --color-ink-muted: #b4b8ba;
      --color-ink-faint: #969da1;
      --color-accent: #ff8a5f;
      --color-accent-hover: #ffb095;
      --color-accent-solid: #e6551b;
      --color-accent-solid-hover: #b83e10;
      --color-accent-soft: #4a2a20;
      --color-accent-ink: #ffb095;
      --color-primary: #b83e10;
      --color-primary-hover: #c94718;
      --color-primary-active: #d34c1c;
      --color-primary-soft: #44291f;
      --color-on-primary: #ffffff;
      --color-link: #9ebdff;
      --color-link-hover: #c4d6ff;
      --color-on-accent: #ffffff;
      --color-brand-blue: #aecacd;
      --color-brand-coral: #ef8d7c;
      --color-brand-dark: #0f1112;
      --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: #2a2e31;
      --color-focus: #9ebdff;
      --color-focus-offset: #141617;
      --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;
    }
  }
}