@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

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

:root {
  --bg:       #0f0e0c;
  --surface:  #1a1916;
  --surface2: #242220;
  --border:   #4a4844;
  --gold:     #d4b05a;
  --gold-dim: #b89040;
  --cream:    #f2ead8;
  --muted:    #b0a494;   /* was #9e9080 — bumped for readability */
  --red:      #e05448;
  --green:    #3cc470;
  --blue:     #5a9fd4;

  /* Spacing scale */
  --gap-xs: 0.4rem;
  --gap-sm: 0.75rem;
  --gap-md: 1.25rem;
  --gap-lg: 2rem;
}

/* Base font — 16px root, all sizing relative to this */
html { font-size: 16px; }
body {
  background: var(--bg); color: var(--cream);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;        /* 16px — never go below this for body text */
  line-height: 1.6;
  min-height: 100vh; display: flex; flex-direction: column;
}

/* ── Typography scale ───────────────────────────────────── */
/* Use these classes instead of arbitrary rem values in pages */
.text-xl   { font-size: 1.25rem; }   /* 20px — headings */
.text-lg   { font-size: 1.1rem; }    /* 17.6px — subheadings */
.text-md   { font-size: 1rem; }      /* 16px — body */
.text-sm   { font-size: 0.9rem; }    /* 14.4px — secondary info */
.text-xs   { font-size: 0.8rem; }    /* 12.8px — hints, labels — MINIMUM */

.text-gold   { color: var(--gold); }
.text-muted  { color: var(--muted); }
.text-cream  { color: var(--cream); }

/* ── Toast ─────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(2rem);
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--cream); padding: 0.85rem 1.75rem;
  font-size: 1rem; letter-spacing: 0.04em;
  opacity: 0; transition: all 0.25s; pointer-events: none;
  white-space: nowrap; z-index: 200;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.good { border-color: var(--green); color: var(--green); }

/* ── Tag pill ───────────────────────────────────────────── */
.tag-pill {
  font-size: 0.85rem; padding: 0.25rem 0.7rem;
  border: 1px solid var(--gold-dim); color: var(--gold);
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* ── Buttons ─────────────────────────────────────────────
   All buttons are recognisable — min height 40px, clear labels,
   visible borders, strong hover states.
──────────────────────────────────────────────────────── */
button, .btn {
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

/* Primary — gold fill, used for main actions */
.btn-primary {
  background: var(--gold); color: var(--bg);
  border: none;
  padding: 0.65rem 1.75rem;
  font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  min-height: 42px;
}
.btn-primary:hover { background: #e0c070; }
.btn-primary:disabled { opacity: 0.4; cursor: default; }

/* Secondary — bordered, used for secondary actions */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border); color: var(--cream);
  padding: 0.65rem 1.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  min-height: 42px;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }
.btn-secondary:disabled { opacity: 0.4; cursor: default; }

/* Ghost — minimal, used for tertiary/inline actions */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border); color: var(--muted);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  min-height: 36px;
}
.btn-ghost:hover { border-color: var(--gold-dim); color: var(--cream); }

/* Danger — red, used for destructive actions */
.btn-danger {
  background: transparent;
  border: 1px solid var(--red); color: var(--red);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  min-height: 36px;
}
.btn-danger:hover { background: var(--red); color: var(--bg); }

/* ── Filter pills ────────────────────────────────────────
   Used in filter bars across pages — must be readable and
   clearly show active state.
──────────────────────────────────────────────────────── */
.fpill {
  font-size: 0.9rem; padding: 0.35rem 0.8rem;
  border: 1px solid var(--border); color: var(--cream);
  letter-spacing: 0.04em; cursor: pointer; transition: all 0.12s;
  background: none; font-family: 'JetBrains Mono', monospace;
  white-space: nowrap; min-height: 34px;
}
.fpill:hover { border-color: var(--gold-dim); color: var(--gold); }
.fpill.active {
  border-color: var(--gold); color: var(--gold);
  background: rgba(212,176,90,0.15);
  font-weight: 500;
}

/* ── Forms ──────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; max-width: 640px; }
.form-label { font-size: 0.9rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.form-input, .form-textarea {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--cream); padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', monospace; font-size: 1rem;
  outline: none; transition: border-color 0.15s; width: 100%;
  min-height: 42px;
}
.form-input:focus, .form-textarea:focus { border-color: var(--gold-dim); }
.form-textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.form-hint { font-size: 0.85rem; color: var(--muted); }
.form-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; max-width: 640px; }

/* ── Labels / section headers ───────────────────────────── */
.label {
  font-size: 0.8rem; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* ── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }