/* dark.css — shared base for koozer.co.uk */

/* ── Design tokens ───────────────────────────────────── */
:root {
  --bg:         #252b28;  /* page background */
  --bg-2:       #1e1e1e;  /* card / panel */
  --bg-3:       #383838;  /* sunken — inputs, value boxes */
  --bg-hover:   #3a3a3a;  /* hover state */
  --bg-danger:  #2a1a1a;  /* danger tint */
  --bg-active:  #1a2a1e;  /* active / green tint */

  --border:     #757575;  /* standard border */
  --border-hi:  #888;     /* highlighted / focused border */

  --text:       #e0e0e0;  /* primary text */
  --text-2:     #888;     /* muted */
  --text-3:     #555;     /* dim */

  --accent:     #3fcb90;  /* green */
  --accent-hi:  #3a7b6f;  /* green hover */
  --green:      #4aff9e;  /* active / TRMNL */
  --red:        #ff6b6b;  /* danger */
}

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

/* ── Base ────────────────────────────────────────────── */
body {
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Navigation burger ───────────────────────────────── */
.nav-burger-wrap {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 999;
}

.nav-burger-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 5px 9px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.nav-burger-btn:hover {
  color: var(--text);
  border-color: var(--border-hi);
}

.nav-drop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  min-width: 180px;
  padding: 2px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}

.nav-drop.open { display: block; }

.nav-drop a {
  display: block;
  padding: 8px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
}

.nav-drop a:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

.nav-drop hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}

/* ── Buttons (padding / specifics set per page) ──────── */
.btn {
  display: inline-block;
  font-size: .85rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-danger  { background: var(--bg-danger); color: var(--red); border: 1px solid var(--red); }

/* ── Utilities ───────────────────────────────────────── */
.form-inline { display: inline; }