/* Copied from the Acre & Hearth site (src/styles/global.css). Acre & Hearth themes.
   Light = "Linen & Sage" (default), dark = "Hearthside". Tokens from the approved
   HearthThemes mockup; link/hover/band-link/field tokens added for states it doesn't show.
   The theme follows the OS unless the visitor picks one (data-theme on <html>). */
:root {
  --bg: #FBFAF6;
  --panel: #EEF1EA;
  --rule: #D5DCCF;
  --text: #1E2620;
  --text2: #3F4A41;
  --text3: #5F6A60;
  --accent: #A2491B;
  --mark-leaf: #2F4A38;
  --mark-flame: #A2491B;
  --link: #8A3E16;
  --link-hover: #5E2A0F;
  --header-bg: #FBFAF6;
  --header-text: #1E2620;
  --hero-bg: #DDE4D6;
  --hero-text: #1E2620;
  --hero-text2: #3F4A41;
  --hero-accent: #A2491B;
  --band-bg: #2F4A38;
  --band-text: #F3F1EA;
  --band-text2: #D7DED2;
  --band-link: #F5C9A6;
  --band-panel: #3B5A45;
  --cta-bg: #2F4A38;
  --cta-text: #FFFFFF;
  --cta-hover: #243A2C;
  --form-btn-bg: #E8823A;
  --form-btn-text: #1E2620;
  --form-btn-hover: #F09A5C;
  --field-border: #7D877E;
  --field-disabled: #ECEFE8;
  color-scheme: light;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1240px;
  --gutter: 32px;
  --measure: 70ch;
}

:root[data-theme='dark'] {
  --bg: #1C1915;
  --panel: #2A241E;
  --rule: #4A4036;
  --text: #EFE6D8;
  --text2: #D9CDB9;
  --text3: #B3A792;
  --accent: #E8823A;
  --link: #F0A066;
  --link-hover: #F7C29A;
  --header-bg: #1C1915;
  --header-text: #EFE6D8;
  --hero-bg: #3A3128;
  --hero-text: #EFE6D8;
  --hero-text2: #D9CDB9;
  --hero-accent: #E8823A;
  --band-bg: #EFE6D8;
  --band-text: #1C1915;
  --band-text2: #4A4036;
  --band-link: #7A3D10;
  --band-panel: #E5D9C5;
  --cta-bg: #E8823A;
  --cta-text: #1C1915;
  --cta-hover: #F7C29A;
  --form-btn-bg: #1C1915;
  --form-btn-text: #EFE6D8;
  --form-btn-hover: #3A3128;
  --field-border: #8C7F6C;
  --field-disabled: #F7F2EA;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #1C1915;
    --panel: #2A241E;
    --rule: #4A4036;
    --text: #EFE6D8;
    --text2: #D9CDB9;
    --text3: #B3A792;
    --accent: #E8823A;
    --mark-leaf: #9CC2A3;
    --mark-flame: #E8823A;
    --link: #F0A066;
    --link-hover: #F7C29A;
    --header-bg: #1C1915;
    --header-text: #EFE6D8;
    --hero-bg: #3A3128;
    --hero-text: #EFE6D8;
    --hero-text2: #D9CDB9;
    --hero-accent: #E8823A;
    --band-bg: #EFE6D8;
    --band-text: #1C1915;
    --band-text2: #4A4036;
    --band-link: #7A3D10;
    --band-panel: #E5D9C5;
    --cta-bg: #E8823A;
    --cta-text: #1C1915;
    --cta-hover: #F7C29A;
    --form-btn-bg: #1C1915;
    --form-btn-text: #EFE6D8;
    --form-btn-hover: #3A3128;
    --field-border: #8C7F6C;
    --field-disabled: #F7F2EA;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; }

.site-header {
  display: flex; align-items: center; gap: 10px;
  max-width: 640px; margin: 0 auto; padding: 20px 16px 8px;
}
.site-header a { display: flex; align-items: center; gap: 10px; color: var(--header-text); text-decoration: none; }
.wordmark { font-family: var(--serif); font-size: 26px; line-height: 1; }
.brand-mark { flex: none; display: block; }
.brand-mark .leaf { fill: var(--mark-leaf); }
.brand-mark .flame { fill: var(--mark-flame); }

main { max-width: 640px; margin: 0 auto; padding: 8px 16px 64px; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 24px 0 8px; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
p { margin: 8px 0; }
.lede { color: var(--text2); }
.muted { color: var(--text3); font-size: 15px; }

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin: 16px 0;
}
.card h2 { margin-top: 0; }

label { display: block; font-weight: 600; margin: 12px 0 6px; }
input[type=email], input[type=text] {
  width: 100%; font: inherit; padding: 12px 14px;
  border: 1px solid var(--field-border); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
input.code { font-size: 26px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.row > input { flex: 1 1 220px; }

button, .button {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 999px; padding: 11px 20px; margin-top: 12px;
  background: var(--cta-bg); color: var(--cta-text); text-decoration: none;
}
button:hover, .button:hover { background: var(--cta-hover); color: var(--cta-text); }
button.quiet, .button.quiet {
  background: transparent; color: var(--link); border: 1px solid var(--rule); padding: 7px 14px; margin-top: 0; font-size: 15px;
}
button.quiet:hover { color: var(--link-hover); border-color: var(--field-border); }
button[disabled] { opacity: 0.6; cursor: progress; }

ul.list { list-style: none; padding: 0; margin: 8px 0 0; }
ul.list li {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--rule);
}
ul.list li:first-child { border-top: 0; }
.who { min-width: 0; overflow-wrap: anywhere; }
.tag {
  display: inline-block; font-size: 13px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: var(--hero-bg); color: var(--hero-text2); margin-left: 6px;
}
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-name { font-family: var(--serif); font-size: 32px; margin: 0; }
.error { color: var(--accent); font-weight: 600; min-height: 1em; }
.notice { background: var(--hero-bg); color: var(--hero-text); border-radius: 10px; padding: 10px 14px; }
[hidden] { display: none !important; }
footer { max-width: 640px; margin: 0 auto; padding: 0 16px 32px; color: var(--text3); font-size: 14px; }