@layer system {
  /* ── Fluid type scale (clamp 320 → 1280px viewport range, ratio 1.25 default) ── */
  :root {
    --type-scale-ratio: 1.25;
    --type-base-min: 1rem;
    --type-base-max: 1.125rem;
    --type-step--2: clamp(0.69rem, 0.66rem + 0.16vw, 0.79rem);
    --type-step--1: clamp(0.83rem, 0.78rem + 0.27vw, 1rem);
    --type-step-0:  clamp(1rem,    0.92rem + 0.42vw, 1.25rem);
    --type-step-1:  clamp(1.2rem,  1.07rem + 0.65vw, 1.56rem);
    --type-step-2:  clamp(1.44rem, 1.24rem + 0.97vw, 1.95rem);
    --type-step-3:  clamp(1.73rem, 1.43rem + 1.46vw, 2.44rem);
    --type-step-4:  clamp(2.07rem, 1.65rem + 2.13vw, 3.05rem);
    --type-step-5:  clamp(2.49rem, 1.88rem + 3.05vw, 3.81rem);
    --type-step-6:  clamp(2.99rem, 2.13rem + 4.29vw, 4.77rem);
    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-normal: 1.5;
    --leading-loose: 1.75;
    --measure: 65ch;

    /* ── Spacing scale derived from --space-base (default 1rem) ── */
    --space-base: 1rem;
    --space-3xs: calc(var(--space-base) * 0.125);
    --space-2xs: calc(var(--space-base) * 0.25);
    --space-xs:  calc(var(--space-base) * 0.5);
    --space-sm:  calc(var(--space-base) * 0.75);
    --space-md:  var(--space-base);
    --space-lg:  calc(var(--space-base) * 1.5);
    --space-xl:  calc(var(--space-base) * 2);
    --space-2xl: calc(var(--space-base) * 3);
    --space-3xl: calc(var(--space-base) * 4.5);

    /* ── Container-query breakpoints ── */
    --bp-sm:  30em;
    --bp-md:  48em;
    --bp-lg:  64em;
    --bp-xl:  80em;
    --bp-2xl: 96em;

    /* ── Motion ── */
    --motion-duration-fast: 120ms;
    --motion-duration-base: 240ms;
    --motion-duration-slow: 400ms;
    --motion-ease-out:    cubic-bezier(0.2, 0, 0, 1);
    --motion-ease-in-out: cubic-bezier(0.3, 0, 0, 1);
    --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index scale ── */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ── Shadow scale (token-driven HSL alpha) ── */
    --shadow-color: 0 0% 0%;
    --shadow-xs: 0 1px 1px hsl(var(--shadow-color) / 0.04);
    --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 1px 3px hsl(var(--shadow-color) / 0.10);
    --shadow-md: 0 4px 6px hsl(var(--shadow-color) / 0.07), 0 2px 4px hsl(var(--shadow-color) / 0.06);
    --shadow-lg: 0 10px 15px hsl(var(--shadow-color) / 0.10), 0 4px 6px hsl(var(--shadow-color) / 0.05);
    --shadow-xl: 0 20px 25px hsl(var(--shadow-color) / 0.10), 0 10px 10px hsl(var(--shadow-color) / 0.04);
    --shadow-2xl: 0 25px 50px hsl(var(--shadow-color) / 0.25);

    /* Density default — 'comfortable'. Override via [data-density] body attr. */
    --density-multiplier: 1;
  }

  body {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: var(--type-step-0);
    line-height: var(--leading-normal);
    color: var(--color-text-default, #1a202c);
    background: var(--color-surface-page, #ffffff);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    font-weight: var(--font-weight-bold, 700);
  }
  h1 { font-size: var(--type-step-5); }
  h2 { font-size: var(--type-step-4); }
  h3 { font-size: var(--type-step-3); }
  h4 { font-size: var(--type-step-2); }
  h5 { font-size: var(--type-step-1); }
  h6 { font-size: var(--type-step-0); }

  a { color: var(--color-text-link, currentColor); text-decoration: underline; text-underline-offset: 0.15em; }
  a:hover { color: var(--color-text-linkHover, var(--color-text-link, currentColor)); }

  :focus-visible {
    outline: 2px solid var(--color-border-focus, var(--color-brand-primary, #3b82f6));
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
  }

  /* Density overrides via body attribute. */
  body[data-density="compact"]     { --density-multiplier: 0.85; --space-base: 0.85rem; }
  body[data-density="comfortable"] { --density-multiplier: 1;    --space-base: 1rem; }
  body[data-density="spacious"]    { --density-multiplier: 1.15; --space-base: 1.15rem; }

  /* Reduced motion. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --motion-duration-fast: 0ms;
      --motion-duration-base: 0ms;
      --motion-duration-slow: 0ms;
    }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ── Print baseline (Phase G) ── */
  @media print {
    :root { --color-surface-page: #fff; --color-text-default: #000; }
    body { font-size: 11pt; line-height: 1.4; }
    nav, header.pa-header, footer.pa-footer, .pa-nav, [data-no-print] { display: none !important; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
    a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
    h1, h2, h3 { page-break-after: avoid; }
    img, table, figure { page-break-inside: avoid; max-width: 100% !important; }
    .pa-content, .pa-layout, main { display: block !important; }
  }

  /* ── .prose — readable rich-text container (Phase B) ── */
  .prose {
    max-inline-size: var(--measure);
    margin-inline: auto;
    color: var(--color-text-default, #1a202c);
    font-size: var(--type-step-0);
    line-height: var(--leading-normal);
  }
  .prose > * + * { margin-block-start: var(--space-md); }
  .prose h1, .prose h2, .prose h3, .prose h4 { margin-block-start: var(--space-xl); margin-block-end: var(--space-sm); }
  .prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-block-start: 0; }
  .prose p { margin-block: var(--space-sm); }
  .prose ul, .prose ol { padding-inline-start: 1.5em; }
  .prose ul > li + li, .prose ol > li + li { margin-block-start: var(--space-2xs); }
  .prose blockquote {
    margin-inline: 0;
    padding-inline-start: var(--space-md);
    border-inline-start: 4px solid var(--color-border-strong, #cbd5e0);
    color: var(--color-text-muted, #718096);
    font-style: italic;
  }
  .prose code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.92em;
    background: var(--color-surface-muted, #edf2f7);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm, 4px);
  }
  .prose pre {
    font-family: var(--font-mono, ui-monospace, monospace);
    background: var(--color-surface-muted, #edf2f7);
    padding: var(--space-md);
    border-radius: var(--radius-md, 8px);
    overflow-x: auto;
  }
  .prose pre code { background: transparent; padding: 0; }
  .prose table { width: 100%; border-collapse: collapse; }
  .prose th, .prose td { padding: var(--space-xs) var(--space-sm); border-block-end: 1px solid var(--color-border-default, #e2e8f0); text-align: left; }
  .prose img, .prose figure { margin-block: var(--space-lg); }
  .prose hr { margin-block: var(--space-xl); }
  .prose :is(h2, h3):has(+ p) { margin-block-end: var(--space-2xs); }
}