:root,
[data-theme="light"] {
  --color-surface-1: #ffffff;
  --color-surface-2: #f8fafc;
  --color-border: #e2e8f0;
  --color-text-1: #0f172a;
  --color-text-2: #475569;
  --color-accent: #0f7c6e;        /* Books primary — override per product */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #2563eb;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;
  --font-mono: 'JetBrains Mono', monospace;
}
/* The app stamps data-theme on its page wrapper (not on <html>), so the attribute selectors above must match any element:
   otherwise design-system surfaces stay light while the legacy tokens flip dark. An explicit [data-theme="light"] wrapper
   also beats a dark OS setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface-1: #1e293b; --color-surface-2: #0f172a;
    --color-border: #334155; --color-text-1: #e2e8f0; --color-text-2: #94a3b8;
  }
}
:root[data-theme="dark"],
[data-theme="dark"] {
  --color-surface-1: #1e293b; --color-surface-2: #0f172a;
  --color-border: #334155; --color-text-1: #e2e8f0; --color-text-2: #94a3b8;
}

/* Modals become full-screen sheets on phones (UI/UX standard, responsive). */
@media (max-width: 600px) {
  .nas-modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .nas-modal-footer { flex-wrap: wrap; }
}

/* Danger buttons: the Fluent control paints its own accent fill over the host, so colour the control part itself. */
fluent-button.nas-button--danger::part(control) {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}
fluent-button.nas-button--danger:hover::part(control) { filter: brightness(0.92); }