/* Aether — public custom CSS.
 *
 * Overrides Listmonk's default blue-and-grey login / archive / unsubscribe
 * pages with the Netism coalition forest+cream surface and the Aether
 * blue→purple brand gradient on primary buttons. Loaded by the public
 * template engine at /public/custom.css before any of our own template
 * markup, so the cascade order is: listmonk style.css → this file.
 */

:root {
  --aether-forest:       #1f3d2b;
  --aether-leaf:         #2e5d3c;
  --aether-cream:        #f6f3eb;
  --aether-cream-50:     #faf8f0;
  --aether-line:         #d9d4c4;
  --aether-ink:          #202020;
  --aether-mute:         #5b5b5b;
  --aether-blue:         #2b5bff;
  --aether-cyan:         #2bbeff;
  --aether-violet:       #8a4dff;
  --aether-purple:       #a23dff;
  --aether-gradient:     linear-gradient(90deg, #2b5bff 0%, #2bbeff 35%, #8a4dff 70%, #a23dff 100%);
}

body { background-color: var(--aether-cream); color: var(--aether-ink); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; }

.container.wrap { background: #ffffff; border: 1px solid var(--aether-line); border-radius: 12px; box-shadow: 0 10px 40px rgba(33,36,67,0.06); margin-top: 6vh; padding: 32px 36px; }

.header .logo img { max-width: 80px; max-height: 80px; }
.header .logo { text-align: center; margin-bottom: 8px; }
.header { border-bottom: 1px solid var(--aether-line); padding-bottom: 12px; margin-bottom: 18px; }

h2 { color: var(--aether-ink); font-weight: 700; }

input[type=text], input[type=email], input[type=password], input[type=tel], textarea, select {
  border: 1px solid var(--aether-line);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  font-size: 14px;
  background: #ffffff;
  color: var(--aether-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--aether-blue);
  box-shadow: 0 0 0 3px rgba(43,91,255,0.12);
}

label { color: var(--aether-mute); font-size: 13px; font-weight: 600; margin-bottom: 4px; display: block; }

button.button, input[type=submit].button {
  background: var(--aether-gradient);
  border: none;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  font-size: 15px;
  transition: filter 0.15s;
}
button.button:hover, input[type=submit].button:hover { filter: brightness(1.08); }

.button-outline {
  background: #ffffff !important;
  color: var(--aether-ink) !important;
  border: 1px solid var(--aether-line) !important;
}

a { color: var(--aether-blue); }
a:hover { color: var(--aether-purple); }

footer { color: var(--aether-mute); margin-top: 24px; }
footer a { color: var(--aether-mute); text-decoration: underline; }

.error { color: #b04a3a; font-size: 13px; }