/* === arikami.net — Flexoki LIGHT for Listmonk public pages === */
/* Force light scheme only */
:root {
  color-scheme: light;
  --paper: #FFFCF0;      /* Flexoki paper */
  --ink:   #100F0F;      /* Flexoki black/ink */
  --tx:    var(--ink);
  --tx-2:  #403D3D;
  --tx-3:  #6E6A68;
  --ui:    rgba(16,15,15,.14);
  --ui-2:  rgba(16,15,15,.08);
  --ui-3:  rgba(16,15,15,.04);
  --surface:#FFF9E8;     /* soft card */
  --accent:#2F6B55;      /* muted green */
  --accent-ink:#FFFFFF;
  --ring:  rgba(47,107,85,.25);
}

/* Base */
html, body { background: var(--paper) !important; color: var(--tx); }
body {
  margin: 0;
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}
#app, .container, .wrap { background: transparent !important; }

/* Main content wrapper (works with stock templates) */
main, section {
  max-width: 560px;
  margin: clamp(16px,4vw,48px) auto;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--ui);
  border-radius: 16px;
  box-shadow: none;
}

/* Headings + helper text */
h1, h2 { margin: 0 0 6px; letter-spacing: .2px; color: var(--tx); }
h1 { font-size: clamp(22px,2.2vw,28px); }
.description, .lead, .subtitle { color: var(--tx-2); }

/* Normalize Listmonk’s default p/field blocks so they don’t look “bent” */
.form > div, .form > p, form > div, form > p { margin: 0; padding: 0; }
.form .field, .form p, form p { display: grid; gap: 6px; margin: 0 0 12px; }

/* Labels + inputs */
label { display: block; font-size: 13px; color: var(--tx-3); }
input[type="email"], input[type="text"], input[type="password"], input[type="search"] {
  width: 100%;
  appearance: none;
  border: 1px solid var(--ui);
  background: transparent;
  color: var(--tx);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: var(--tx-3); }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 6px var(--ring); }

/* Submit buttons */
.button, button[type="submit"], input[type="submit"] {
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
}

/* Lists block: keep it visible, but make it Flexoki-light and tidy */
.lists {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--ui-2);
  border-radius: 12px;
  background: var(--ui-3);
}
.lists h2 { margin: 0 0 8px; font-size: 14px; color: var(--tx-2); }
.lists .list, .lists p {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 8px;
}
.lists input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
}

/* hCaptcha or captcha area */
.captcha { margin-top: 12px; }

/* Footer / powered-by tone */
footer, .powered-by, .footer { color: var(--tx-3); }

/* Links */
a { color: var(--accent); text-decoration-thickness: 1px; }

/* Tables (confirmation/unsubscribe pages sometimes show tables) */
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--ui-2); padding: 8px 0; }
th { text-align: left; color: var(--tx-2); font-weight: 600; }