/* =========================================================================
   Oakland vs. the World — Listmonk public-page theme
   Paste into: Admin → Settings → Appearance → "Public custom CSS".
   Matches the site's light "warm paper" palette. Targets Listmonk's public
   DOM: .container.wrap (card), .logo (header), .button, form fields, footer.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Titillium+Web:wght@300;400;600&family=Monomaniac+One&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --oak-bg:         #faf6f0; /* warm paper background */
  --oak-surface:    #fffdf8; /* card */
  --oak-text:       #2a2520;
  --oak-amber:      #b87900; /* brand accent (light-mode phosphor) */
  --oak-amber-dark: #8a5b00; /* hover */
  --oak-border:     #e2d3b3;
  --oak-muted:      #8a7f70;
  --oak-error:      #c53030;
  --oak-font-body:  'Titillium Web', 'Courier New', Courier, monospace;
  --oak-font-head:  'Space Grotesk', 'Courier New', Courier, monospace;
}

body {
  background: var(--oak-bg);
  color: var(--oak-text);
  font-family: var(--oak-font-body);
}

/* ---- Card ---- */
.wrap {
  background: var(--oak-surface);
  border: 1px solid var(--oak-border);
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--oak-border);
}

/* ---- Header + logo ---- */
.header { border-bottom: 1px solid var(--oak-border); }
.logo img { max-height: 64px; width: auto; }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  color: var(--oak-amber);
  font-family: var(--oak-font-head);
  font-weight: 700;
}
a { color: var(--oak-amber); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--oak-text); }
label { color: var(--oak-text); }

/* ---- Form fields ---- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  background: #fff;
  color: var(--oak-text);
  border: 1px solid var(--oak-border);
  border-radius: 4px;
  box-shadow: none;
  font-family: var(--oak-font-body);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--oak-amber);
  box-shadow: 0 0 0 2px rgba(184, 121, 0, 0.2);
  outline: none;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--oak-amber); }

/* ---- Buttons ---- */
.button, button, input[type="submit"] {
  background: var(--oak-amber);
  color: #fff;
  border: 1px solid var(--oak-amber);
  border-radius: 4px;
  font-family: var(--oak-font-head);
  font-weight: 700;
}
.button:hover, button:hover, input[type="submit"]:hover {
  background: var(--oak-amber-dark);
  border-color: var(--oak-amber-dark);
  color: #fff;
}
.button.button-outline, input[type="submit"].button-outline {
  background: transparent;
  color: var(--oak-amber);
  border: 1px solid var(--oak-amber);
}
.button.button-outline:hover, input[type="submit"].button-outline:hover {
  background: var(--oak-amber);
  color: #fff;
}

/* ---- Messages ---- */
.error { color: var(--oak-error); }

/* ---- Footer ---- */
footer.container { color: var(--oak-muted); font-family: var(--oak-font-body); }
footer.container a { color: var(--oak-amber); }