/* ─── Ink & Ember design tokens (mirrors saveyor/src/theme.ts) ───────────────
   Dark-first warm neutrals, one accent (ember; rust in light mode). Same file
   as the Chrome extension's lib/base.css; the older variable names are kept so
   existing styles pick these up. Fonts: Bricolage Grotesque (headings), Instrument Sans (UI). */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: dark light;
  --bg-primary: #0e0e11;    /* ink */
  --bg-secondary: #17171c;  /* surface */
  --bg-tertiary: #1f1f26;   /* raised */
  --bg-hover: #26262e;
  --text-primary: #f3f1ec;
  --text-secondary: #a9a6a0; /* muted */
  --text-muted: #6f6c66;     /* dim */
  --accent: #f2a93b;         /* ember */
  --accent-hover: #f5b95a;
  --on-accent: #0e0e11;
  --accent-subtle: rgba(242, 169, 59, 0.14);
  --danger: #ff453a;
  --success: #30d158;
  --border: #2a2a33;         /* line */
  --folder-back: #23232b;
  --folder-tab: #2a2a33;
  --folder-front: #2c2c36;
  --folder-front-hover: #33333e;
  --img-veil: brightness(0.8);  /* 20% ink over card pictures in dark mode (theme.ts imageVeil) */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --font-ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Bricolage Grotesque", var(--font-ui);
}

/* Light: when the system is light (unless the toggle chose dark), or when the
   toggle chose light. html[data-theme] is set by /theme.js. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-primary: #f7f5f0;   /* paper */
    --bg-secondary: #ffffff; /* card */
    --bg-tertiary: #efece5;
    --bg-hover: #e4e0d8;
    --text-primary: #1c1b19;
    --text-secondary: #6b6862;
    --text-muted: #9a968f;
    --accent: #b45309;       /* rust */
    --accent-hover: #9a4708;
    --on-accent: #ffffff;
    --accent-subtle: #fbefd9;
    --danger: #d70015;
    --success: #248a3d;
    --border: #e4e0d8;
    --folder-back: #e6e2da;
    --folder-tab: #ece8e0;
    --folder-front: #efece5;
    --folder-front-hover: #f5f2ec;
    --img-veil: none;
  }
}
:root[data-theme="light"] {
  --bg-primary: #f7f5f0;   /* paper */
  --bg-secondary: #ffffff; /* card */
  --bg-tertiary: #efece5;
  --bg-hover: #e4e0d8;
  --text-primary: #1c1b19;
  --text-secondary: #6b6862;
  --text-muted: #9a968f;
  --accent: #b45309;       /* rust */
  --accent-hover: #9a4708;
  --on-accent: #ffffff;
  --accent-subtle: #fbefd9;
  --danger: #d70015;
  --success: #248a3d;
  --border: #e4e0d8;
  --folder-back: #e6e2da;
  --folder-tab: #ece8e0;
  --folder-front: #efece5;
  --folder-front-hover: #f5f2ec;
  --img-veil: none;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.03em; }

.hidden { display: none !important; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { opacity: 0.4; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Primary: the accent, with ink (dark) / white (light) text, like the app */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 15px;
  transition: opacity 0.15s;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Light / dark toggle button (shows what it switches to) */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle:not([data-mode="dark"]) .i-sun,
.theme-toggle[data-mode="dark"] .i-moon { display: none; }