/* Shared design tokens for hello-world-12 */
:root {
  --purple-light: #C4B5FD; /* decorative/large-text on dark backgrounds; use --purple-action for body text on light surfaces */
  --purple-glow: #A855F7;
  --purple-action: #7C3AED;
  --purple-action-hover: #6D28D9;
  --purple-action-subtle: #EDE9FE; /* interactive hover background (distinct from --surface-light) */
  --dark: #050510;
  --surface-light: #F5F3FF; /* light purple page/card background — static surfaces only */
  --text-muted: #6B7280;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-light: #1E1B2E; /* dark purple equivalent for dark-mode users */
    --text-muted: #9CA3AF; /* lighter gray for readable contrast on dark backgrounds */
  }
}

/* ===== NOTETAKER — dark-mode card overrides ===== */
/* Scoped to body.notetaker so these rules only apply on notetaker.html and do not
   silently no-op on other pages that also load theme.css. */
@media (prefers-color-scheme: dark) {
  body.notetaker .note-form, body.notetaker .note {
    background: #2D2A3E; /* dark-mode card surface — sits above --surface-light (#1E1B2E) */
    color: #E9D5FF;
  }
  body.notetaker .note h3 { color: #E9D5FF; }
  body.notetaker .note p { color: #C4B5FD; }
  body.notetaker .note .meta { color: #9CA3AF; }
  body.notetaker .note .actions button { background: #2D2A3E; border-color: #4B4369; color: #C4B5FD; }
  body.notetaker .note .actions button.delete { color: #F87171; border-color: #F87171; }
  body.notetaker .note .actions button.delete:hover { background: #3D1F1F; }
  body.notetaker .note-form input, body.notetaker .note-form textarea { background: #1E1B2E; color: #E9D5FF; border-color: #4B4369; }
}