/* afreshai — shared tokens & base styles, used across the app pages
   (kept in sync with the palette/fonts on index.html) */

:root {
  --paper: #0F3A66;
  --sheet: #FFFFFF;
  --ink: #EDF2FA;
  --muted: #A9C3DE;
  --lilac: #A99BF0;
  --dawn: #F0BC52;
  --line: #2A5A8C;
  --error: #FF8A80;
  --btn-bg: #EDF2FA;
  --btn-fg: #0F3A66;
  --btn-hover-bg: #F0BC52;
  --btn-hover-fg: #1B2336;
  --sans: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}
/* The theme is already dark; a dark OS just deepens the page a little. */
@media (prefers-color-scheme: dark) {
  :root { --paper: #0B2E52; --line: #23527F; --btn-fg: #0B2E52; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}
a { color: var(--lilac); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--dawn);
  outline-offset: 2px;
  border-radius: 4px;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }

header { padding: 1.5rem 0; }
header .wrap { max-width: 1080px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 700; font-size: 2.7rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; line-height: 1; }
.brand-mark { flex: none; display: block; width: 3.25rem; height: 3.25rem; }
@media (max-width: 600px) {
  .brand { font-size: 1.9rem; gap: 0.55rem; }
  .brand-mark { width: 2.3rem; height: 2.3rem; }
}
.nav-link { color: var(--muted); text-decoration: none; font-size: 1.1rem; font-weight: 600; }
.nav-link:hover { color: var(--ink); text-decoration: underline; }
.nav-link[aria-current="page"] { color: var(--ink); }

main { padding: 1rem 0 5rem; }

.card {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2.25rem 2rem;
  box-shadow: 0 24px 48px -32px rgba(34, 31, 51, 0.35);
}

/* White surfaces sit on the deep blue, so they carry their own text
   colours. Redefining the tokens here rather than restyling each element
   means anything nested inside picks these up automatically. */
.card, .sheet {
  --ink: #1B2336;
  --muted: #46536E;
  --lilac: #5E4F9E;
  --line: #D7E5F3;
  --error: #B3261E;
  --paper: #FFFFFF;
  color: var(--ink);
}

h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
h2 { font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
.lede { color: var(--muted); margin: 0 0 2rem; max-width: 56ch; }

fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
legend, label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.95rem; }
.hint { font-weight: 400; color: var(--muted); font-size: 0.88rem; margin: -0.15rem 0 0.5rem; }
.field { margin-bottom: 1.5rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
}
textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }

.radio-group { display: flex; flex-direction: column; gap: 0.5rem; }
.radio-option {
  display: flex; align-items: flex-start; gap: 0.6rem;
  border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.85rem;
  font-weight: 400; cursor: pointer;
}
.radio-option input { margin-top: 0.25rem; }
.radio-option:has(input:checked) { border-color: var(--lilac); background: color-mix(in srgb, var(--lilac) 6%, transparent); }
.radio-option .opt-title { font-weight: 600; display: block; }
.radio-option .opt-sub { color: var(--muted); font-size: 0.88rem; }

.btn {
  display: inline-block; background: var(--btn-bg); color: var(--btn-fg);
  font: 600 1.05rem var(--sans); padding: 0.9rem 1.6rem; border-radius: 999px;
  border: 0; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.btn-secondary:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

.error-box {
  border: 1px solid var(--error); color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent);
  border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 1.5rem; font-size: 0.95rem; display: none;
}
.error-box.show { display: block; }

.status-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.spinner {
  width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--lilac);
  animation: spin 0.8s linear infinite; display: none;
}
.spinner.show { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; font-size: 0.85rem; color: var(--muted); }
footer .wrap { max-width: 1080px; }