/* Public-safe semantic tokens shared by both applications. */
:root {
  --pd-color-scheme: light;
  --pd-on-accent: #fff;
  --pd-selection: #ddd5ff;
  --pd-warning-border: #e2c58d;
  --pd-danger-border: #ebada5;
  --pd-danger-hover: #ffe0dc;
  --pd-overlay: rgb(23 27 52 / 35%);
  --pd-canvas: #f7f8fb;
  --pd-surface: #ffffff;
  --pd-inset: #f4f5f9;
  --pd-text: #171b34;
  --pd-secondary: #424d70;
  --pd-muted: #606b89;
  --pd-accent: #5930d9;
  --pd-accent-hover: #4320af;
  --pd-accent-soft: #f0edff;
  --pd-brand-surface: var(--pd-accent-soft);
  --pd-border: #dfe3ee;
  --pd-control-border: #808ba5;
  --pd-success: #166534;
  --pd-warning: #854d0e;
  --pd-danger: #b42318;
  --pd-success-bg: #effaf2;
  --pd-warning-bg: #fff8e8;
  --pd-danger-bg: #fff0ee;
  --pd-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pd-mono: "JetBrains Mono", ui-monospace, monospace;
  --pd-text-sm: 0.8125rem;
  --pd-text-base: 0.9375rem;
  --pd-text-title: 2rem;
  --pd-space-1: 4px;
  --pd-space-2: 8px;
  --pd-space-3: 12px;
  --pd-space-4: 16px;
  --pd-space-6: 24px;
  --pd-space-8: 32px;
  --pd-radius: 4px;
  --pd-radius-panel: 6px;
  --pd-shadow-overlay: 0 8px 24px rgb(23 27 52 / 12%);
  --pd-header-height: 64px;
  --pd-content-width: 1200px;
  --pd-gutter: 24px;
}

:root[data-theme="dark"] {
  --pd-color-scheme: dark;
  --pd-canvas: #10141d;
  --pd-surface: #161b26;
  --pd-inset: #202737;
  --pd-text: #edf0f7;
  --pd-secondary: #c1cadb;
  --pd-muted: #a2adc2;
  --pd-accent: #b9a3ff;
  --pd-accent-hover: #d3c4ff;
  --pd-accent-soft: #302645;
  --pd-brand-surface: var(--pd-inset);
  --pd-on-accent: #171124;
  --pd-border: #354055;
  --pd-control-border: #77849c;
  --pd-success: #8bdeb0;
  --pd-warning: #f2cb84;
  --pd-danger: #ffaaa2;
  --pd-success-bg: #193329;
  --pd-warning-bg: #382d1e;
  --pd-danger-bg: #3d2328;
  --pd-warning-border: #997241;
  --pd-danger-border: #b97173;
  --pd-danger-hover: #512b31;
  --pd-selection: #493b71;
  --pd-overlay: rgb(0 0 0 / 65%);
  --pd-shadow-overlay: 0 8px 24px rgb(0 0 0 / 35%);
}

.pd-shell {
  color-scheme: var(--pd-color-scheme);
  background: var(--pd-canvas);
  background-image: none;
  font-family: var(--pd-sans);
  color: var(--pd-text);
}
:root:has(.pd-shell) {
  color-scheme: var(--pd-color-scheme);
  --scrollbar-track: var(--pd-inset);
  --scrollbar-thumb: #aeb6c9;
  --scrollbar-thumb-hover: var(--pd-muted);
  scrollbar-color: var(--pd-control-border) var(--pd-inset);
}
.pd-container, .pd-header__inner {
  width: 100%;
  max-width: var(--pd-content-width);
  margin-inline: auto;
  padding-inline: max(var(--pd-gutter), env(safe-area-inset-left)) max(var(--pd-gutter), env(safe-area-inset-right));
}
.pd-header {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--pd-border);
  border-radius: 0;
  color: var(--pd-text);
  background: var(--pd-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pd-header__inner {
  min-height: var(--pd-header-height);
  display: flex;
  align-items: center;
  gap: var(--pd-space-6);
}
.pd-header .pd-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-2);
  color: var(--pd-text);
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}
.pd-header .pd-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--pd-accent);
  background: var(--pd-brand-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-panel);
  font-size: 1rem;
}
.pd-header__scope {
  padding-left: var(--pd-space-3);
  border-left: 1px solid var(--pd-border);
  color: var(--pd-secondary);
  font-size: var(--pd-text-sm);
  font-weight: 500;
}
.pd-shell :is(.pd-header, .pd-footer) :focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 3px;
  box-shadow: none;
}
@media (max-width: 760px) {
  .pd-shell { --pd-gutter: 16px; }
  .pd-header__inner { gap: var(--pd-space-3); }
}

.pd-foundation {
  color-scheme: var(--pd-color-scheme);
  color: var(--pd-text);
  background: var(--pd-surface);
  font-family: var(--pd-sans);
  font-size: var(--pd-text-base);
  line-height: 1.55;
  --fg: var(--pd-text);
  --fg-soft: var(--pd-secondary);
  --fg-muted: var(--pd-muted);
  --fg-faint: var(--pd-muted);
  --fg-on-brand: var(--pd-on-accent);
  --bg: var(--pd-canvas);
  --bg-elev-1: var(--pd-surface);
  --bg-elev-2: var(--pd-inset);
  --bg-elev-3: var(--pd-accent-soft);
  --bg-inset: var(--pd-inset);
  --line: var(--pd-border);
  --line-strong: var(--pd-control-border);
  --font-sans: var(--pd-sans);
  --font-mono: var(--pd-mono);
  --radius-sm: var(--pd-radius);
  --radius: var(--pd-radius);
  --radius-lg: var(--pd-radius-panel);
  --brand: var(--pd-accent);
  --brand-300: var(--pd-accent);
  --brand-500: var(--pd-accent);
  --brand-strong: var(--pd-accent);
  --brand-strong-hover: var(--pd-accent-hover);
  --label-official-fg: var(--pd-accent);
  --surface: var(--pd-surface);
  --surface-hover: var(--pd-inset);
  --bg-card: var(--pd-surface);
  --good: var(--pd-success);
  --warn: var(--pd-warning);
  --danger: var(--pd-danger);
  --status-warn: var(--pd-warning);
  --status-warn-bg: var(--pd-warning-bg);
  --status-warn-line: var(--pd-warning-border);
  --status-danger: var(--pd-danger);
  --status-danger-bg: var(--pd-danger-bg);
  --status-danger-line: var(--pd-danger-border);
  --status-good: var(--pd-success);
}

.pd-foundation :is(.btn, .button) {
  min-height: 44px;
  border-radius: var(--pd-radius);
  box-shadow: none;
  background: var(--pd-accent);
  border: 1px solid var(--pd-accent);
  color: var(--pd-on-accent);
  font-family: var(--pd-sans);
}
.pd-foundation :is(.btn, .button):hover { background: var(--pd-accent-hover); transform: none; }
.pd-foundation :is(.btn--ghost, .button--ghost) {
  color: var(--pd-secondary);
  background: var(--pd-surface);
  border-color: var(--pd-control-border);
}
.pd-foundation :is(.btn--ghost, .button--ghost):hover {
  background: var(--pd-inset);
  color: var(--pd-text);
}
.pd-foundation .button--danger {
  background: var(--pd-danger-bg);
  color: var(--pd-danger);
  border-color: var(--pd-danger);
}
.pd-foundation .button--danger:hover { background: var(--pd-danger-hover); }
.pd-foundation :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background-color: var(--pd-surface);
  color: var(--pd-text);
  border-color: var(--pd-control-border);
  border-radius: var(--pd-radius);
  font-family: var(--pd-sans);
}
.pd-foundation :is(input, textarea)::placeholder { color: var(--pd-muted); opacity: 1; }
.pd-foundation :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--pd-accent); }
.pd-foundation :is(.badge, .label) {
  background: var(--pd-accent-soft);
  color: var(--pd-accent);
  border-color: transparent;
  border-radius: var(--pd-radius);
  font-family: var(--pd-sans);
  font-size: var(--pd-text-sm);
  letter-spacing: normal;
  text-transform: none;
}
.pd-foundation .badge--good { color: var(--pd-success); background: var(--pd-success-bg); }
.pd-foundation :is(.badge--warn, .status-badge--abandoned) { color: var(--pd-warning); background: var(--pd-warning-bg); }
.pd-foundation :is(.badge--danger, .status-badge--security) { color: var(--pd-danger); background: var(--pd-danger-bg); }
.pd-foundation :is(.status-badge, .filter-chip) { border-radius: var(--pd-radius); }
.pd-foundation :is(.list__empty, .table-empty) {
  padding: var(--pd-space-8) var(--pd-space-4);
  color: var(--pd-muted);
  background: var(--pd-inset);
  border-radius: var(--pd-radius-panel);
}
.pd-foundation .table-toolbar { background: var(--pd-inset); }
.pd-foundation .data-table th { color: var(--pd-secondary); }
.pd-foundation .data-table tbody tr:hover { background: var(--pd-inset); }
.pd-foundation .skel-line {
  background: var(--pd-border);
  animation: none;
}
.pd-foundation .skel-line::after { display: none; }
.pd-foundation .label--primary { box-shadow: none; font-weight: 600; }
.pd-foundation :focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 3px;
  box-shadow: none;
}
.pd-foundation ::selection { color: var(--pd-text); background: var(--pd-selection); }

@media (prefers-reduced-motion: reduce) {
  .pd-foundation *, .pd-foundation *::before, .pd-foundation *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.pd-header .pd-appearance {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  min-width: 0;
}
.pd-header .pd-appearance__trigger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--pd-control-border);
  border-radius: var(--pd-radius);
  background: var(--pd-surface);
  color: var(--pd-secondary);
  cursor: pointer;
}
.pd-header .pd-appearance__popover {
  position: absolute;
  z-index: 1;
  inset-inline-end: 0;
  top: calc(100% + var(--pd-space-2));
  width: 168px;
  max-width: calc(100vw - 32px);
  padding: var(--pd-space-2);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-panel);
  background: var(--pd-surface);
  box-shadow: var(--pd-shadow-overlay);
}
.pd-header .pd-appearance__popover[hidden] { display: none; }
.pd-header .pd-appearance__popover button {
  display: grid;
  grid-template-columns: 20px 1fr 16px;
  align-items: center;
  gap: var(--pd-space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--pd-space-2);
  border: 0;
  border-radius: var(--pd-radius);
  color: var(--pd-text);
  background: transparent;
  font: 400 var(--pd-text-sm) var(--pd-sans);
  text-align: start;
  cursor: pointer;
}
.pd-header .pd-appearance__trigger:hover,
.pd-header .pd-appearance__popover button:hover { background: var(--pd-inset); }
.pd-header .pd-appearance__popover button[aria-pressed="true"] { color: var(--pd-accent); background: var(--pd-accent-soft); }
.pd-header .pd-appearance__check { visibility: hidden; }
.pd-header [aria-pressed="true"] .pd-appearance__check { visibility: visible; }
.admin-shell .pd-appearance { margin-left: auto; }
/* Compatibility surfaces still read these older semantic aliases. */
.pd-foundation .status-badge--official { color: var(--pd-accent); background: var(--pd-accent-soft); border-color: var(--pd-border); }
.pd-foundation :is(.pkg-forked, .markdown pre, .markdown table) { background: var(--pd-inset); }
.pd-shell .boot__spinner { border-color: var(--pd-border); border-top-color: var(--pd-accent); }
.pd-shell .toast { color: var(--pd-text); background: var(--pd-surface); border-color: var(--pd-border); box-shadow: var(--pd-shadow-overlay); }
.pd-shell .toast[data-tone="error"] { border-left-color: var(--pd-danger); }
:root[data-theme="dark"] .pd-foundation { --brand-400: var(--pd-accent); --brand-600: var(--pd-accent); --brand-700: var(--pd-accent-soft); }
.pd-appearance-changing, .pd-appearance-changing *,
.pd-appearance-changing *::before, .pd-appearance-changing *::after { transition: none !important; }