/*
 * save-for-later.css — self-contained theme for the Save-for-later module.
 *
 * The components style themselves with CSS custom properties so you can drop the
 * module into any project and restyle it by overriding these variables (no
 * forking the components). Import this file once (e.g. in your global stylesheet
 * or layout) for sensible light/dark defaults, then override any token in your
 * own CSS to match your brand — e.g. `:root { --color-entpoind: #2563eb; }`.
 *
 * The components use Tailwind utility classes for layout, so Tailwind CSS is a
 * peer requirement; these variables + the `.btn*` classes are the only bespoke
 * styling the module needs.
 */

:root {
  /* Light ("paper") surfaces */
  --color-paper: #ffffff;
  --color-paper-2: #f5f5f4;
  --color-paper-ink: #1c1917;
  --color-paper-line: #e7e5e4;
  --color-paper-mute: #78716c;

  /* Dark ("ink") surfaces — used by the module's `dark:` variants */
  --color-ink: #0c0a09;
  --color-ink-elev-1: #1c1917;
  --color-ink-elev-2: #292524;
  --color-ink-line: #292524;
  --color-ink-mute: #a8a29e;

  /* Accent — override this to match your brand */
  --color-entpoind: #ff5c35;
}

/* Minimal button styling the save panel + new-list forms rely on. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.btn-sm {
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
}
.btn-entpoind {
  background: var(--color-entpoind);
  color: #ffffff;
}
.btn-entpoind:hover {
  opacity: 0.9;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}