:root {
  --font-display: "Newsreader", "Lora", Georgia, serif;
  --display: var(--font-display);
  --font-body: "DM Sans", "Aptos", "Segoe UI", system-ui, sans-serif;
  --sans: var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --mono: var(--font-mono);

  --ui-ink: var(--ink, #1b1d1b);
  --ui-ink-muted: var(--ink-2, #505650);
  --ui-paper: var(--paper, #f3eee5);
  --ui-surface: var(--surface, #fffdf8);
  --ui-surface-muted: var(--surface-2, #ebe5da);
  --ui-line: var(--line, #d8d0c3);
  --ui-line-strong: var(--line-dark, #aaa093);
  --ui-accent: var(--olive, #5d6753);
  --ui-accent-strong: var(--olive-dark, #3e4838);
  --ui-danger: var(--danger, #963f37);
  --ui-success: var(--success, #3d724a);

  --ui-space-1: var(--fd-space-1, 0.25rem);
  --ui-space-2: var(--fd-space-2, 0.5rem);
  --ui-space-3: var(--fd-space-3, 0.75rem);
  --ui-space-4: var(--fd-space-4, 1rem);
  --ui-space-5: var(--fd-space-5, 1.5rem);
  --ui-space-6: var(--fd-space-6, 2rem);
  /* S4a (R-7, intended and reviewed): four live declarations already consumed the undefined --ui-space-7. */
  --ui-space-7: var(--fd-space-7, 3rem);
  --ui-space-8: var(--fd-space-8, 4rem);
  --ui-space-9: var(--fd-space-9, 6rem);
  --ui-space-10: var(--fd-space-10, 8rem);
  --ui-collection-gutter-inline: var(--fd-gutter-collection-inline, clamp(.75rem, 2vw, 1.25rem));
  --ui-collection-gutter-block: var(--fd-gutter-collection-block, .75rem);
  --ui-control-min: var(--fd-control-min, 2.75rem);
  --ui-target-min: var(--fd-target-min, 2.75rem);
  --ui-radius-sm: var(--fd-radius-4, 0.625rem);
  --ui-radius-md: var(--fd-radius-6, 1rem);
  --ui-radius: var(--fd-radius-5, 0.875rem);
  --ui-radius-lg: var(--fd-radius-7, 1.25rem);
  --ui-radius-xl: var(--fd-radius-8, 1.75rem);
  --ui-radius-pill: var(--fd-radius-pill, 999px);
  --ui-focus-size: var(--fd-focus-width, 3px);
  /* S4a (design ADR-7): a solid ring, about 8.3:1 on the panel paper (was olive at 42% alpha, about 1.8:1). */
  --ui-focus-color: var(--ui-accent-strong);
  /* S4a: collapses to 0.01ms under reduced motion, like the foundation step it aliases. */
  --ui-duration-fast: var(--fd-duration-fast, 150ms);
}

/* Panel-soft semantic roles (gui-premium-upgrade). S4a fixes the focus, boundary and skeleton values and starts consuming
   them from styles/ui-components.css. */
:root {
  --ui-radius-mark: var(--fd-radius-2);
  --ui-radius-control: var(--fd-radius-5);
  --ui-radius-field: var(--fd-radius-5);
  --ui-radius-chip: var(--fd-radius-pill);
  --ui-radius-surface: var(--fd-radius-7);
  --ui-radius-dialog: var(--fd-radius-7);
  --ui-radius-feature: var(--fd-radius-8);
  --ui-gutter-inline: clamp(var(--fd-space-4), 3vw, var(--fd-space-6));
  --ui-section-y: var(--fd-space-6);
  /* Final (S4a): the paper ring on the dark shell, 12.7:1 or more on the ink, graphite and error toast (5.9:1). */
  --ui-focus-color-inverse: var(--ui-paper);
  /* Final (S4a): a soft boundary that still reaches 3:1 on the muted surface (3.6:1; 4.4:1 on the panel surface). */
  --ui-line-control: color-mix(in srgb, var(--ui-ink-muted) 55%, var(--ui-line-strong));
  --ui-feedback-danger: var(--ui-danger);
  --ui-feedback-success: var(--ui-success);
  /* Final (S4a): the skeleton sits on the muted collection surface, so both stops mix the ink into that surface. */
  --ui-skeleton-base: color-mix(in srgb, var(--ui-ink) 12%, var(--ui-surface-muted));
  --ui-skeleton-highlight: color-mix(in srgb, var(--ui-ink) 5%, var(--ui-surface-muted));

  /* Elevation (ADR-14): diffuse (wider ambient, lighter key). The panel never applies tenant presets, so its ink is a
     safe shadow color. --ui-shadow-sm stays undeclared: S4a repointed its only consumer at the resting level (R-21). */
  --ui-shadow-color: var(--ui-ink);
  --ui-shadow-resting: var(--fd-shadow-1) color-mix(in srgb, var(--ui-shadow-color) 6%, transparent),
                       var(--fd-shadow-4) color-mix(in srgb, var(--ui-shadow-color) 7%, transparent);
  --ui-shadow-raised:  var(--fd-shadow-2) color-mix(in srgb, var(--ui-shadow-color) 7%, transparent),
                       var(--fd-shadow-5) color-mix(in srgb, var(--ui-shadow-color) 10%, transparent);
  --ui-shadow-overlay: var(--fd-shadow-3) color-mix(in srgb, var(--ui-shadow-color) 8%, transparent),
                       var(--fd-shadow-6) color-mix(in srgb, var(--ui-shadow-color) 13%, transparent);
  --ui-shadow-modal:   var(--fd-shadow-3) color-mix(in srgb, var(--ui-shadow-color) 9%, transparent),
                       var(--fd-shadow-7) color-mix(in srgb, var(--ui-shadow-color) 18%, transparent);
  --ui-shadow-sheet:   var(--fd-shadow-up-1) color-mix(in srgb, var(--ui-shadow-color) 6%, transparent),
                       var(--fd-shadow-up-2) color-mix(in srgb, var(--ui-shadow-color) 10%, transparent);
  --ui-lift-hover: var(--fd-lift-1);
  --ui-sheen: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ui-surface-muted) 30%, transparent));
}