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

    --color-canvas: #f9f5ed;
    --color-surface: #fffdf8;
    --color-on-strong: #ffffff;
    --color-text: #29211b;
    --color-text-muted: #786e62;
    --color-border: #ddd2c1;
    --color-border-strong: #b9aa96;
    --color-accent: #9d3822;
    --color-accent-strong: #7f2c1b;
    --color-danger: #b42318;
    --color-success: #27623b;
    --color-focus: #0a3d8f;
    --color-selection: #ecd7c8;
    --color-disabled-text: #665f56;
    --color-disabled-surface: #eee9df;
    --color-status-attention-surface: #fff3cd;
    --color-status-attention-text: #664d03;
    --color-status-danger-surface: #fde2e2;
    --color-status-danger-text: #8a1f1f;
    --color-status-neutral-surface: #eaeaea;
    --color-status-neutral-text: #3a3a3a;
    --color-status-success-surface: #e6f4ea;
    --color-status-success-text: #195a2a;
    --color-error-canvas: #ffffff;
    --color-error-text: #261b23;
    --color-error-status: #d30001;
    --color-error-body: #555555;
    --color-error-reference: #666666;

    --font-reading: Georgia, Cambria, "Times New Roman", Times, serif;
    --font-interface: ui-sans-serif, system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.8rem, 4vw, 2.75rem);
    /* One restrained size for every UI page title. Editorial distinction
       comes from composition and typeface, not an oversized h1. */
    --text-page-title: var(--text-xl);
    /* Section headings sit one clear step below the page title at every
       width, so no h2 can outweigh the h1 it belongs to. */
    --text-section-title: clamp(1.4rem, 2.6vw, 1.75rem);

    --leading-tight: 1.05;
    --leading-copy: 1.65;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --width-reading: 42.5rem;
    /* Reserved for genuine two-column page bodies; see pages.css. */
    --width-wide: 50rem;
    --width-application: 72rem;
    /* Inline page gutter shared by main and the site notices above it. */
    --page-gutter: clamp(var(--space-4), 4vw, var(--space-7));

    --border-thin: 1px;
    --radius-small: 2px;
    --radius-medium: 4px;
    --elevation-menu: 0 0.5rem 1.5rem rgb(41 33 27 / 12%);
    --motion-quick: 120ms;

    /* Behavior-neutral hooks for the future scoped preset layer. */
    --journal-canvas: transparent;
    --journal-width-feed: var(--width-wide);
    --journal-width-reading: var(--width-reading);
    --journal-meta-letter-spacing: 0.07em;
    --journal-meta-transform: uppercase;
    --journal-post-title-color: var(--color-text);
    --journal-post-title-hover: var(--color-accent);
    --journal-featured-image-margin: var(--space-4);
    --journal-featured-caption-color: var(--color-text-muted);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 0;
    /* Reserve the classic scrollbar lane so the centred column does not jump
       sideways between short and long pages. Overlay scrollbars are unaffected. */
    scrollbar-gutter: stable;
    /* No root background: the canvas, including that lane, then takes the
       body's preset-aware background instead of the Journal light canvas. */
  }

  body:not(.error-layout) {
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  body:not(.error-layout) h1,
  body:not(.error-layout) h2,
  body:not(.error-layout) h3,
  body:not(.error-layout) h4 {
    color: var(--color-text);
    font-family: var(--font-reading);
    text-wrap: balance;
  }

  body:not(.error-layout) a {
    color: var(--color-accent);
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.16em;
  }

  body:not(.error-layout) a:hover {
    color: var(--color-accent-strong);
  }

  button,
  input,
  select,
  textarea {
    box-sizing: border-box;
    max-width: 100%;
    font: inherit;
  }

  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  select {
    min-height: 24px;
  }

  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    min-width: 24px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  main {
    min-width: 0;
    overflow-wrap: break-word;
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--color-selection);
    color: var(--color-text);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto;
      transition-duration: 0.01ms;
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
    }
  }
}