/* Gamestash — design tokens shared with yznts.cc and gametools.yznts.cc.
   Warm editorial palette, light and dark. Tailwind maps its colour names onto
   these variables (see layout.html), so utilities stay theme-aware without a
   second set of classes. Components that repeat across pages live here;
   one-off layout stays in the templates as utilities. */

:root {
  --bg:        #f7f3ec;
  --bg-soft:   #efe9dd;
  --bg-sunk:   #ebe4d4;
  --ink:       #1f1b16;
  --ink-soft:  #4a423a;
  --ink-mute:  #7a7066;
  --rule:      #d9d0bd;
  --rule-soft: #e6dfd0;
  --accent:    #cc785c;
  --accent-ink:#a5573e;
  --tag-bg:    #ece4d2;
  --ok:        #4f7a52;
  --danger:    #a94436;
}

[data-theme="dark"] {
  --bg:        #1a1613;
  --bg-soft:   #221d18;
  --bg-sunk:   #14110e;
  --ink:       #f1ebdf;
  --ink-soft:  #d2c8b8;
  --ink-mute:  #897e6e;
  --rule:      #3a3128;
  --rule-soft: #2a231d;
  --accent:    #e89479;
  --accent-ink:#f0a88e;
  --tag-bg:    #2a231d;
  --ok:        #8fbf92;
  --danger:    #e8877a;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
  transition: background-color .25s ease, color .25s ease;
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }

[x-cloak] { display: none !important; }

/* Theme toggle icon swap */
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ---------- typography ---------- */

.eyebrow {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.display {
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
/* Accent word inside a display heading, upright rather than italic. */
.display em { font-style: normal; font-weight: inherit; color: var(--accent-ink); }

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
  letter-spacing: -0.005em;
}

.h-section {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- controls ---------- */

.btn {
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, opacity .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap;
  line-height: 1.2;
}
.btn:hover { border-color: var(--ink-mute); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.btn-accent { background: var(--accent-ink); color: #fff; border-color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-ghost { border-color: transparent; }
.btn-ghost:hover { border-color: transparent; background: var(--tag-bg); color: var(--ink); }

.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); }

.btn-sm { font-size: 12px; padding: 6px 11px; border-radius: 7px; gap: 5px; }

/* Round icon button used in the header. */
.btn-icon {
  display: grid; place-items: center;
  height: 30px; width: 30px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
  flex-shrink: 0;
}
.btn-icon:hover { border-color: var(--ink-mute); color: var(--ink); }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.input {
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--ink-mute); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Full-screen scrim behind a dialog or the media viewer. Plain CSS on
   purpose: the opacity modifier this used to rely on (bg-black/92) was not
   emitted by the Tailwind build, so the overlay rendered with no background
   at all and the page underneath showed through undimmed. */
.scrim {
  background: rgb(0 0 0 / .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The row of media details and actions under the viewer, on a bar of its own
   so it stays readable over the bottom edge of any picture. */
.viewer-bar {
  background: rgb(0 0 0 / .58);
  border: 1px solid rgb(255 255 255 / .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
}
@media (min-width: 640px) { .viewer-bar { border-radius: 999px; } }

/* Compact variant, sized to sit in a row beside a .btn-sm carrying h-[34px]:
   the toolbar's game field and the same input/button pairing inside modals. */
.input-sm { height: 34px; padding-top: 0; padding-bottom: 0; font-size: 13px; }

.label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

/* ---------- surfaces ---------- */

.card {
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  background: var(--bg-soft);
  padding: 22px 24px;
}
.card-flush { padding: 0; overflow: hidden; }

.chip {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--tag-bg);
  color: var(--ink-mute);
  white-space: nowrap;
  display: inline-block;
}
.chip-ok     { color: var(--ok); }
.chip-danger { color: var(--danger); }
.chip-accent { color: var(--accent-ink); }

code, .mono {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
code {
  font-size: .88em;
  background: var(--bg-sunk);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
  border: 1px solid var(--rule-soft);
}

/* Storage meter, used on the gallery and billing pages. */
.meter { height: 6px; border-radius: 999px; background: var(--bg-sunk); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.meter.is-full > span { background: var(--danger); }

/* ---------- feedback ---------- */

.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise   { animation: rise .55s ease both; }
.rise-2 { animation-delay: .08s; }
.rise-3 { animation-delay: .16s; }
.rise-4 { animation-delay: .24s; }

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