/* sixmonthbible.com — shared base styles.
   Uses system serif for body reading (warm, gift-like), system sans for UI.
   One palette, generous whitespace, no decorative gradients. */

:root {
  --ink: #1a1a1a;
  --ink-soft: #3f3f3f;    /* was #4a4a4a — AA contrast against --paper */
  --ink-quiet: #5e5e5e;   /* was #8a8a8a — AA contrast against --paper and #fff */
  --paper: #fbf9f4;
  --paper-alt: #f2ede1;
  --rule: #ddd4c3;
  --accent: #8a2b1f;            /* deep oxblood; matches leather-bound bibles */
  --accent-weak: #c6756a;
  --ok: #3f6e3a;
  --warn: #a7760b;
  --err: #8a2b1f;
  --radius: 6px;
  --max: 640px;
  --line: 1.55;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-h1: clamp(2rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.25rem, 2vw, 1.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-size: var(--fs-body);
  line-height: var(--line);
  font-feature-settings: "onum" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

header.brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 3rem;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
header.brand a { color: inherit; text-decoration: none; }
header.brand .mark {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
}
header.brand nav a { margin-left: 1.25rem; font-size: var(--fs-small); }

h1 {
  font-size: var(--fs-h1);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: 0;
  margin: 2.25rem 0 0.75rem;
}

.lede {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 36ch;
  margin: 0 0 2.5rem;
}
.lede strong { color: var(--ink); font-weight: 500; }

form.configurator {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.field {
  display: grid;
  gap: 0.375rem;
}
.field label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.field .hint {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-meta);
  color: var(--ink-quiet);
  min-height: 1em;
}
.field .hint.ok  { color: var(--ok); }
.field .hint.warn { color: var(--warn); }
.field .hint.err { color: var(--err); }

input[type="text"], input[type="date"], .slug-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.3;
}
input[type="text"]:focus, input[type="date"]:focus, .slug-input:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(138, 43, 31, 0.15);
}
input::placeholder { color: var(--ink-quiet); }

.slug-input {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}
.slug-input .prefix {
  padding: 0.625rem 0.25rem 0.625rem 0.75rem;
  color: var(--ink-quiet);
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-small);
}
.slug-input input {
  flex: 1;
  padding: 0.625rem 0.75rem 0.625rem 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: var(--fs-body);
}
.slug-input .spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin-right: 0.75rem;
  animation: spin 0.8s linear infinite;
  display: none;
}
.slug-input.checking .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.shuffle-link {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-meta);
  color: var(--ink-quiet);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  justify-self: start;
}
.shuffle-link:hover { color: var(--accent); }

.plan-picker {
  display: grid;
  gap: 0.5rem;
}
.plan-option {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.plan-option:hover { border-color: var(--accent-weak); }
.plan-option input { accent-color: var(--accent); margin: 0; }
.plan-option .name { font-weight: 500; }
.plan-option .days { color: var(--ink-soft); font-size: var(--fs-small); margin-left: auto; }
.plan-option.selected { border-color: var(--accent); background: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.plan-option.default::after {
  content: "default";
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-meta);
  color: var(--ink-quiet);
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
}

.submit {
  margin-top: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease;
}
.submit:hover:not(:disabled) { background: #6d1f16; }
.submit:disabled { background: var(--ink-quiet); cursor: not-allowed; }

.form-error {
  color: var(--err);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-small);
  margin-top: 0.5rem;
  min-height: 1em;
}

.muted {
  color: var(--ink-quiet);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-small);
}
.sans { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

footer.colophon {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-meta);
  color: var(--ink-quiet);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
footer.colophon a { color: inherit; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f1ead9;
    --ink-soft: #cbc3b0;
    --ink-quiet: #8a8270;
    --paper: #141210;
    --paper-alt: #1e1b17;
    --rule: #39332a;
    --accent: #d6867a;
    --accent-weak: #8a5a52;
  }
  input[type="text"], input[type="date"], .slug-input, .plan-option {
    background: var(--paper-alt);
  }
  .plan-option.selected { background: var(--paper-alt); box-shadow: inset 0 0 0 1px var(--accent); }
  .submit { background: var(--accent); color: #1a120f; }
  .submit:hover:not(:disabled) { background: #e8a096; }
}