/* Shared design tokens and components for Thumbnail Tinder.
   Concept: a light table. Frosted glass surface, slide mounts, grease-pencil marks.
   Red pencil = chosen, graphite = rejected, blue pencil = postponed. */

:root {
  --table-hi: #26262B;   /* table: dark grey */
  --table-lo: #1B1B1F;
  --on: #F1F4FA;         /* text on the table */
  --on-muted: #A8A8B2;
  --mount: #FBFBF9;      /* paper: slide mounts, cards */
  --ink: #15171B;
  --muted: #4A515B;      /* secondary text on paper */
  --line: #C9CDD3;
  --red: #DE3028;
  --blue: #2A5BD7;

  --f-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  font: 15px/1.45 var(--f-body);
  color: var(--ink);
  background: var(--table-lo);
}
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hidden { display: none !important; }

.brand { font: 600 14px/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; color: var(--on); }

kbd {
  font: 500 11px/1 var(--f-mono); padding: 3px 6px; border-radius: 3px;
  border: 1px solid currentColor; opacity: .75;
}

/* ---------- Buttons ----------
   Default: ink on paper. Inside a header (on the table) they flip to light on dark. */
header { --fg: var(--on); --fg-inv: var(--table-lo); }
.btn {
  --fg: var(--ink); --fg-inv: var(--mount);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 6px; white-space: nowrap;
  font-weight: 600; font-size: 14px; line-height: 1.2;
  background: transparent; color: var(--fg); border: 1.5px solid var(--fg);
  transition: background .15s, color .15s;
}
header .btn { --fg: var(--on); --fg-inv: var(--table-lo); }
.btn:not(:disabled):hover { background: var(--fg); color: var(--fg-inv); }
.btn.primary { background: var(--fg); color: var(--fg-inv); }
.btn.primary:not(:disabled):hover { opacity: .88; }
.btn:disabled { opacity: .3; }
select.btn { appearance: none; padding-right: 16px; cursor: pointer; }
select.btn:hover { background: transparent; color: var(--fg); }
select.btn option { background: var(--mount); color: var(--ink); }

/* ---------- Drop zone ---------- */
.screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 32px 24px; min-height: 420px;
  background: var(--mount); border: 1.5px dashed var(--muted); border-radius: 6px;
  transition: border-color .15s, background .15s;
}
.screen.solid { border: 1px solid var(--line); box-shadow: 0 24px 40px -28px #0007; }
.screen.dragover { border-color: var(--red); border-style: solid; background: #fff; }
.screen h2 { margin: 0; font: 600 20px/1.25 var(--f-display); letter-spacing: -.02em; }
.screen p { margin: 0; color: var(--muted); max-width: 380px; }
.screen .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 10; max-width: calc(100% - 32px);
  transform: translateX(-50%) translateY(120%); opacity: 0; pointer-events: none;
  background: var(--mount); color: var(--ink); padding: 10px 16px; border-radius: 6px; box-shadow: 0 8px 24px #0006;
  font-size: 14px; transition: transform .25s, opacity .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

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