/* Moonlander — global theme: tokens, reset, shared components. */

:root {
  color-scheme: dark;

  --bg: #141210;
  --bg-alt: #1b1816;
  --bg-soft: #211d1a;
  --bg-hl: #2a2521;
  --bg-line: #1d1917;
  --bg-region: #3b3023;
  --border: #3a332d;

  --fg: #e8dcc0;
  --fg-alt: #f2e8d0;
  --fg-soft: #d8ccb4;
  --muted: #b8aa92;
  --comment: #8d806d;
  --comment-2: #9b8e79;
  --sand: #c8b89c;

  --orange: #d98d3f;
  --yellow: #e0b15d;
  --gold: #e6c77c;
  --gold-soft: #d7b66f;
  --red: #e06c75;
  --red-soft: #c65a66;
  --green: #98c379;
  --green-soft: #6fa06a;
  --aqua: #76b7c4;
  --blue: #7aa2f7;
  --blue-muted: #6d94b0;

  /* Legacy aliases used across the app. */
  --surface: var(--bg-alt);
  --text: var(--fg);
  --accent: var(--yellow);
  --danger: var(--red);
  --ok: var(--green);
  --warn: var(--yellow);

  --radius: 6px;
  --radius-sm: 4px;
  --font-sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --shadow: 0 1px 0 rgb(0 0 0 / 35%);
}

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--bg-region); color: var(--fg-alt); }
::placeholder { color: var(--comment); }

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

* { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }

a {
  color: var(--yellow);
  text-decoration-color: color-mix(in srgb, var(--yellow) 45%, transparent);
  text-underline-offset: .18em;
}
a:hover { color: var(--gold); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--fg-alt);
}

code, kbd, time { font-family: var(--font-mono); }

code {
  padding: .05em .3em;
  border-radius: 3px;
  background: var(--bg-soft);
  color: var(--sand);
  font-size: .9em;
}

hr { border: 0; border-top: 1px solid var(--border); }

/* Top bar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem clamp(1rem, 3vw, 1.75rem);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.topbar a { color: var(--muted); text-decoration: none; }
.topbar a:hover { color: var(--fg); }

/* Buttons */

.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.btn {
  padding: .6rem 1.05rem;
  border: 1px solid var(--yellow);
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--bg);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--bg); }

.btn-ghost {
  padding: .4rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: .84rem;
}
.btn-ghost:hover {
  background: var(--bg-soft);
  border-color: var(--sand);
  color: var(--fg);
}

.btn-ghost.btn-danger {
  border-color: color-mix(in srgb, var(--red) 50%, var(--border));
  color: var(--red);
}
.btn-ghost.btn-danger:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--bg);
}

/* Badges */

.badge {
  display: inline-block;
  padding: .08rem .45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-hl);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Surfaces */

.card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Notices */

.notice,
.error {
  margin: 0 0 1.25rem;
  padding: .65rem .9rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.notice {
  border-color: color-mix(in srgb, var(--green) 40%, var(--border));
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--green);
}
.error {
  border-color: color-mix(in srgb, var(--red) 40%, var(--border));
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
}

/* Forms */

input[type="file"] {
  width: 100%;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
}
input[type="file"]::file-selector-button {
  margin-right: .6rem;
  padding: .35rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--sand);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--sand);
  color: var(--fg);
}