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

    --color-canvas: #f6f5f2;
    --color-surface: #ffffff;
    --color-surface-subtle: #efeee9;
    --color-surface-raised: #f3f2ed;
    --color-border: #d9d7d0;
    --color-border-strong: #aaa79d;

    --color-ink: #1d1f21;
    --color-ink-muted: #5d6269;
    --color-ink-faint: #5d6269;

    /* Orange is a brand accent, never the filled action treatment. */
    --color-accent: #e6551b;
    --color-accent-hover: #b83e10;
    --color-accent-solid: #e6551b;
    --color-accent-solid-hover: #b83e10;
    --color-accent-soft: #fbe5dc;
    --color-accent-ink: #87300f;

    /* Primary actions use a navy/blue and white pair with AA contrast. */
    --color-primary: #1f4b99;
    --color-primary-hover: #173a79;
    --color-primary-active: #102b5e;
    --color-primary-soft: #e5edf9;
    --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: #1a4f75;
    --color-link-hover: #123f60;
    --color-on-accent: #ffffff;
    --color-brand-blue: #aecacd;
    --color-brand-coral: #e87461;
    --color-brand-dark: #1d1f21;

    --color-success: #176b43;
    --color-success-soft: #e4f3eb;
    --color-warning: #835000;
    --color-warning-soft: #fff2d6;
    --color-danger: #a33b31;
    --color-danger-soft: #fbe9e7;
    --color-critical: #832537;
    --color-critical-soft: #f3d5dc;
    --color-info: #315f7d;
    --color-info-soft: #d7e6e7;
    --color-muted-soft: #e8e7e2;

    --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: 1.0625rem;
    --font-size-small: .9375rem;
    --font-size-metadata: .8125rem;
    --font-size-label: .875rem;
    --font-size-title: clamp(2rem, 1.82rem + .6vw, 2.375rem);
    --font-size-display: clamp(2.35rem, 1.4rem + 3.2vw, 4.25rem);
    --line-height-body: 1.6;
    --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;

    /* Two intentional corner sizes: controls are 6px, grouped objects are 8px. */
    --radius-control: .375rem;
    --radius-object: .5rem;
    --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: 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: #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: #2f63b5;
      --color-primary-hover: #3a73cc;
      --color-primary-active: #4e86df;
      --color-primary-soft: #23334d;
      --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;
    }
  }
}