:root {
  /* Semantic colors and RGB/emphasis/subtle bridges come from Bootstrap's
     configured Sass palette. Keep component roles and geometry here. */
  --app-font-size-body: var(--bs-body-font-size);
  --app-font-size-reading: 1rem;
  --app-line-height-reading: 1.5;
  --app-reading-measure: 64ch;
  --app-page-gutter: 2rem;
  --app-page-block-padding: 1.5rem;
  --app-column-gutter: 2.5rem;
  --app-section-gap: 1rem;
  --app-section-space-before: 1.75rem;
  --app-section-space-after: 0.75rem;
  --app-heading-content-gap: 0.5rem;
  --app-heading-description-gap: 0.25rem;
  --app-description-content-gap: 0.75rem;
  --app-control-size: 2rem;
  --app-touch-target-size: 2.75rem;
  --app-sidebar-width: 14rem;
  --app-sidebar-rail-width: 3.5rem;
  --app-inspector-width: 25rem;
  --app-inspector-list-min-width: 672px;
  --app-nav-row-size: 1.875rem;
  --app-nav-icon-size: 1rem;
  --app-state-dot-size: 0.5rem;
  --app-motion-hover: 110ms;
  --app-motion-popover: 140ms;
  --app-motion-panel: 200ms;
  --app-motion-expansion: 200ms;
  --app-motion-easing: ease-out;
  --app-surface-hover: #f4f6f8;
  --app-selected-bg: #ebf1ff;
  --app-card-title-font-size: var(--app-font-size-section);
  --app-card-title-font-weight: 600;
  --app-card-title-line-height: var(--app-line-height-section);
  --app-card-title-body-gap: var(--app-heading-content-gap);
  --app-color-scheme: light;
  --app-bg: var(--bs-body-bg);
  --app-ink: var(--bs-emphasis-color);
  --app-ink-body: var(--bs-body-color);
  --app-ink-soft: var(--bs-secondary-color);
  --app-ink-muted: var(--bs-secondary-color);
  --app-accent: var(--bs-primary);
  --app-accent-soft: var(--app-selected-bg);
  --app-danger: var(--bs-danger);
  --app-surface: var(--app-bg);
  --app-surface-strong: var(--app-surface);
  --app-surface-muted: var(--bs-secondary-bg);
  --app-border: #eff0f1;
  --app-border-strong: var(--bs-border-color);
  --app-tab-gap: 0.25rem;
  --app-tab-row-gap: 0.25rem;
  --app-tab-padding-top: 0.3125rem;
  --app-tab-padding-bottom: 0.3125rem;
  --app-tab-padding-inline: 0.75rem;
  --app-tab-line-height: var(--app-line-height-control);
  --app-tab-bg: var(--app-nav-bg);
  --app-tab-hover-bg: var(--app-surface-hover);
  --app-tab-active-bg: var(--app-selected-bg);
  --app-tab-link-color: var(--app-ink-soft);
  --app-tab-link-active-color: var(--app-accent);
  --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
  --app-radius-xl: var(--app-radius-lg);
  --app-radius-lg: var(--bs-border-radius-lg);
  --app-radius-md: var(--bs-border-radius);
  --app-radius-sm: var(--bs-border-radius-sm);
  --app-card-frame-padding-y: var(--app-section-gap);
  --app-card-table-frame-padding-y: var(--app-section-gap);
  --app-card-table-frame-padding-bottom: var(--app-section-gap);
  --bs-card-spacer-x: var(--app-page-gutter);
  --bs-card-spacer-y: var(--app-section-gap);
  --bs-card-title-spacer-y: 0.5rem;
  --app-topbar-shell-bg: var(--bs-tertiary-bg);
  --app-topbar-bg: var(--bs-tertiary-bg);
  --app-topbar-border: 1px solid var(--app-border);
  --app-topbar-focus-ring: var(--app-accent);
  --app-topbar-control-bg: var(--app-control-bg);
  --app-topbar-control-border: var(--app-control-border);
  --app-topbar-control-color: var(--app-ink);
  --app-topbar-control-placeholder-color: var(--app-ink-muted);
  --app-topbar-control-focus-bg: var(--app-control-bg);
  --app-topbar-control-focus-border: var(--app-accent);
  --app-topbar-control-icon-color: var(--app-ink-muted);
  --app-topbar-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23686f76' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --app-topbar-button-color: var(--app-ink);
  --app-topbar-button-bg: transparent;
  --app-topbar-button-border: var(--app-control-border);
  --app-topbar-button-hover-color: var(--app-ink);
  --app-topbar-button-hover-bg: var(--app-surface-hover);
  --app-topbar-button-hover-border: var(--app-control-border);
  --app-topbar-button-active-color: var(--app-ink);
  --app-topbar-button-active-bg: var(--app-selected-bg);
  --app-topbar-button-active-border: var(--app-accent);
  --app-topbar-button-focus-shadow: none;
  --app-nav-bg: var(--bs-tertiary-bg);
  --app-nav-border: var(--app-border-strong);
  --app-nav-backdrop: none;
  --app-nav-link-color: var(--app-ink-muted);
  --app-nav-link-active-color: var(--app-accent);
  --app-nav-selected-pill-bg: #e4ecff;
  --app-nav-selected-pill-border: transparent;
  --app-product-logo-color: var(--app-ink);
  --app-product-logo-hover-color: var(--app-ink);
  --app-product-logo-size: 1.125rem;
  --app-product-logo-letter-spacing: 0;
  --app-profile-menu-min-width: 13rem;
  --app-card-bg: var(--app-surface-strong);
  --app-card-body-color: var(--app-ink-body);
  --app-card-title-color: var(--app-ink);
  --app-card-border-color: var(--app-border-strong);
  --app-card-border: 0 solid transparent;
  --app-card-radius: 0;
  --app-card-shadow: none;
  --app-card-header-bg: var(--app-card-bg);
  --app-card-footer-bg: transparent;
  --app-card-footer-border: 0 solid transparent;
  --app-card-table-heading-border: var(--app-border);
  --app-card-table-heading-color: var(--app-ink-soft);
  --app-card-table-heading-bg: var(--app-surface);
  --app-card-table-row-border: var(--app-border);
  --app-card-table-hover-bg: var(--app-surface-hover);
  /* Root-relative cell insets stay independent of the body font size. */
  --app-table-cell-padding-y: 0.1875rem;
  --app-table-cell-padding-x: 0.625rem;
  --app-table-edge-padding: 0.75rem;
  --app-table-header-size: 2rem;
  --app-modal-z-index: 1060;
  --app-modal-bg: var(--app-surface);
  --app-modal-border-color: var(--app-border-strong);
  --app-modal-header-border-color: var(--app-border);
  --app-modal-footer-border-color: var(--app-border);
  --app-modal-footer-bg: transparent;
  --app-modal-content-color: var(--app-ink);
  --app-modal-content-bg: var(--app-surface-strong);
  --app-modal-content-radius: var(--app-radius-lg);
  --app-modal-content-shadow: var(--app-shadow);
  --app-modal-section-bg: var(--app-surface-muted);
  --app-modal-body-bg: var(--app-surface);
  --app-modal-pre-bg: var(--app-surface-muted);
  --app-modal-pre-border: var(--app-border);
  --app-modal-backdrop-z-index: 1050;
  --app-modal-backdrop-bg: rgba(32, 36, 40, 0.4);
  --app-modal-backdrop-opacity: 1;
  --app-auth-form-width: 25rem;
  --app-auth-page-top: 4rem;
  --app-auth-brand-height: 2rem;
  --app-auth-brand-gap: 2rem;
  --app-auth-page-bottom: 2rem;
  --app-auth-title-size: 1.875rem;
  --app-auth-title-line-height: 1.2;
  --app-auth-body-size: 0.875rem;
  --app-auth-intro-size: 0.9375rem;
  --app-auth-control-size: 3rem;
  --app-auth-control-font-size: 1rem;
  --app-badge-light-bg: var(--app-surface-muted);
  --app-badge-light-color: var(--app-ink);
  --app-badge-light-border: var(--app-border);
  --app-table-secondary-bg: var(--app-surface-muted);
  --app-table-secondary-color: inherit;
  --app-disclosure-indicator-size: 1.4rem;
  --app-details-summary-border: 1px solid var(--app-border-strong);
  --app-details-summary-bg: var(--app-surface);
  --app-details-summary-color: var(--app-ink);
  --app-details-summary-hover-border: 1px solid var(--app-control-border);
  --app-details-summary-hover-bg: var(--app-surface-hover);
  --app-details-summary-open-border: 1px solid var(--app-control-border);
  --app-details-summary-open-bg: var(--app-surface);
  --app-mobile-nav-bg: transparent;
  --app-mobile-nav-border: 0;
  --app-body-background: var(--bs-body-bg);
  --app-body-color: var(--app-ink-body);
  --app-body-font-family: var(--bs-font-sans-serif);
  --app-body-line-height: var(--bs-body-line-height);
  --app-btn-primary-background: var(--app-accent);
  --app-btn-primary-border-color: var(--app-btn-primary-background);
  --app-btn-primary-color: #fff;
  --app-btn-primary-hover-background: var(--app-accent-strong);
  --app-btn-primary-hover-border-color: var(--app-btn-primary-hover-background);
  --app-btn-primary-hover-color: #fff;
  --app-btn-primary-active-background: var(--app-accent-strong);
  --app-btn-primary-active-border-color: var(--app-btn-primary-active-background);
  --app-btn-primary-active-color: #fff;
  --app-btn-primary-disabled-background: var(--app-surface-muted);
  --app-btn-primary-disabled-border-color: var(--app-border-strong);
  --app-btn-primary-disabled-color: var(--app-ink-muted);
  --app-btn-primary-disabled-opacity: 1;
  --app-btn-outline-secondary-border-color: var(--app-control-border);
  --app-btn-outline-secondary-color: var(--app-ink);
  --app-btn-outline-secondary-hover-background: var(--app-surface-hover);
  --app-btn-outline-secondary-hover-border-color: var(--app-control-border);
  --app-btn-outline-secondary-hover-color: var(--app-ink);
  --app-btn-outline-secondary-hover-box-shadow: none;
  --app-button-radius: var(--app-radius-md);
  --app-button-radius-sm: var(--app-radius-md);
  --app-button-font-weight: 500;
  --app-control-bg: var(--app-surface);
  --app-control-border: #858b91;
  --app-control-color: var(--app-ink);
  --app-control-placeholder-color: var(--app-ink-muted);
  --app-control-focus-bg: var(--app-control-bg);
  --app-control-focus-border: var(--app-accent);
  --app-control-focus-shadow: none;
  --app-check-border: var(--app-control-border);
  --app-check-focus-border: var(--app-accent);
  --app-check-focus-shadow: 0 0 0 2px var(--app-surface), 0 0 0 4px var(--app-accent);
  --app-check-checked-bg: var(--app-accent);
  --app-check-checked-border: var(--app-accent-strong);
  --app-dropdown-bg: var(--app-surface);
  --app-dropdown-border: 1px solid var(--app-border-strong);
  --app-dropdown-shadow: var(--app-shadow);
  --app-dropdown-hover-bg: var(--app-surface-hover);
  --app-dropdown-active-bg: var(--app-selected-bg);
  --app-dropdown-active-color: var(--app-ink);
  --app-row-action-size: 1.75rem;
}

/* The existing motion owners all read the same durations, including Bootstrap. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --app-motion-hover: 0ms;
    --app-motion-popover: 0ms;
    --app-motion-panel: 0ms;
    --app-motion-expansion: 0ms;
  }
}