/* Collection design tokens — parchment-and-gold.
   Dark is the default product look. Light is the same language inverted.
   Manual override: <html data-theme="system|dark|light"> (see auth.js / docs/DESIGN.md). */

:root {
  /* Surfaces */
  --bg: #14110e;
  --raised: #1e1914;
  --chrome: #18140f;
  --line: #3a3128;
  --line-soft: #2a231c;
  --text: #f6f0e6;
  --muted: #b3a696;
  --gold: #e0bc8a;
  --ink: #241c16;
  --foil: #d7c07a;
  --danger: #e0a090;
  --up: #8fd19e;
  --down: #f0a090;
  --skeleton: #2a231c;
  --skeleton-shine: #3a3128;
  --overlay: rgb(0 0 0 / 55%);

  /* Type */
  --text-title: 2.125rem;
  --text-brand: 1.75rem;
  --text-section: 1.25rem;
  --text-label: 1rem;
  --text-meta: 0.8125rem;
  --text-micro: 0.6875rem;

  /* Space / radius / thumb */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 48px;
  --radius-thumb: 4px;
  --radius-row: 8px;
  --radius-panel: 12px;
  --radius-pill: 999px;
  --thumb: 42px;

  /* Motion & press (honour prefers-reduced-motion in app.css) */
  --motion-fast: 100ms;
  --motion-med: 180ms;
  --press-scale: 0.97;
  --press-brightness: 0.92;
  --elev-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  --sheet-shadow: 0 -10px 30px rgb(0 0 0 / 45%);

  color-scheme: dark;
  font-family: "Segoe UI", Candara, sans-serif;
}

/* Light when OS prefers light AND user has not forced dark. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f2ea;
    --raised: #fffaf2;
    --chrome: #f0e8dc;
    --line: #d9cdbd;
    --line-soft: #e8dfd2;
    --text: #241c16;
    --muted: #63564a;
    --gold: #8a5a1c;
    --ink: #fffaf2;
    --foil: #8a6d14;
    --danger: #a33a2a;
    --up: #2b6e38;
    --down: #a33a2a;
    --skeleton: #e8dfd2;
    --skeleton-shine: #d9cdbd;
    --overlay: rgb(36 28 22 / 40%);
    --elev-shadow: 0 12px 28px rgb(36 28 22 / 12%);
    --sheet-shadow: 0 -10px 30px rgb(36 28 22 / 18%);
    color-scheme: light;
  }
}

/* Forced light (ignores OS). */
:root[data-theme="light"] {
  --bg: #f7f2ea;
  --raised: #fffaf2;
  --chrome: #f0e8dc;
  --line: #d9cdbd;
  --line-soft: #e8dfd2;
  --text: #241c16;
  --muted: #63564a;
  --gold: #8a5a1c;
  --ink: #fffaf2;
  --foil: #8a6d14;
  --danger: #a33a2a;
  --up: #2b6e38;
  --down: #a33a2a;
  --skeleton: #e8dfd2;
  --skeleton-shine: #d9cdbd;
  --overlay: rgb(36 28 22 / 40%);
  --elev-shadow: 0 12px 28px rgb(36 28 22 / 12%);
  --sheet-shadow: 0 -10px 30px rgb(36 28 22 / 18%);
  color-scheme: light;
}

/* Forced dark — restate tokens so Light → Dark always wins over media query. */
:root[data-theme="dark"] {
  --bg: #14110e;
  --raised: #1e1914;
  --chrome: #18140f;
  --line: #3a3128;
  --line-soft: #2a231c;
  --text: #f6f0e6;
  --muted: #b3a696;
  --gold: #e0bc8a;
  --ink: #241c16;
  --foil: #d7c07a;
  --danger: #e0a090;
  --up: #8fd19e;
  --down: #f0a090;
  --skeleton: #2a231c;
  --skeleton-shine: #3a3128;
  --overlay: rgb(0 0 0 / 55%);
  --elev-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  --sheet-shadow: 0 -10px 30px rgb(0 0 0 / 45%);
  color-scheme: dark;
}

/* The step that writes, or the step in use. */
.btn {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
  transition: transform var(--motion-fast) ease, filter var(--motion-fast) ease, background var(--motion-fast) ease;
}

.btn.quiet {
  border-color: var(--line);
  background: var(--raised);
  color: var(--text);
}

.btn.on,
.btn.quiet.on {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.btn:disabled {
  opacity: 0.45;
}

.btn:active:not(:disabled) {
  transform: scale(var(--press-scale));
  filter: brightness(var(--press-brightness));
}

/* Primary action — M3 Expressive tactics, our palette. Bigger, harder to miss. */
.btn.primary,
.btn.btn-primary {
  min-height: 48px;
  padding: 12px 28px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}

/* Print variants is an outline toggle on the sets list and inside a set. */
.btn.quiet.variants-toggle.on {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--raised);
}

.field {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-row);
  padding: var(--space-2) var(--space-3);
}

.panel {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.card-row {
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  border-radius: var(--radius-row);
  padding: var(--space-1);
}

.card-row img,
.card-row .q-art {
  width: var(--thumb);
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: var(--radius-thumb);
  background: var(--bg);
  display: block;
}

.card-row strong,
.card-row .sub {
  display: block;
}

.card-row .sub {
  color: var(--muted);
  font-size: var(--text-meta);
}

/* Skeleton placeholders — shaped like the data they replace. */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton) 0%,
    var(--skeleton-shine) 50%,
    var(--skeleton) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shine 1.2s ease-in-out infinite;
  border-radius: var(--radius-row);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton-tile {
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-panel);
}

.skeleton-row {
  height: 52px;
}

.skeleton-line {
  height: 0.85em;
  margin: 0.35em 0;
}

.skeleton-line.w40 { width: 40%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w100 { width: 100%; }

@keyframes skeleton-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--skeleton); }
  .btn { transition: none; }
  .btn:active:not(:disabled) { transform: none; }
}