/* Quietbill design system: warm paper, ink, one calm green. Shared by every surface. */

:root {
  --paper: #f5f2eb;
  --paper-deep: #ece7dc;
  --card: #fffdf9;
  --ink: #1c1b18;
  --ink-soft: #3d3a34;
  --muted: #77726a;
  --faint: #a29c90;
  --line: #e4ded2;
  --line-strong: #d2cab9;
  --accent: #1f5f45;
  --accent-hover: #174a36;
  --accent-soft: #e3eee7;
  --accent-ink: #f4faf6;
  --stamp: #b4441c;
  --warn: #9a3412;
  --warn-soft: #fbece4;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgb(28 27 24 / 0.06);
  --shadow: 0 1px 2px rgb(28 27 24 / 0.05), 0 10px 28px -12px rgb(28 27 24 / 0.16);
  --shadow-lg: 0 2px 6px rgb(28 27 24 / 0.04), 0 30px 70px -24px rgb(28 27 24 / 0.3);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; }

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.mono, .num { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Brand mark */
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 1.08rem; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand__mark { width: 26px; height: 26px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1.15rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 0.95rem; font-weight: 550; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgb(255 255 255 / 0.15) inset, 0 6px 16px -6px rgb(31 95 69 / 0.6); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #33312c; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--card); border-color: var(--ink-soft); }
.btn--quiet { background: transparent; color: var(--ink-soft); padding-inline: 0.6rem; }
.btn--quiet:hover { color: var(--ink); background: var(--paper-deep); }
.btn--danger { background: transparent; color: var(--warn); border-color: #ecc9b8; }
.btn--danger:hover { background: var(--warn-soft); }
.btn--lg { padding: 0.95rem 1.5rem; font-size: 1.02rem; }
.btn--sm { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.btn--block { width: 100%; }
.button_to { display: inline; }

/* Forms */
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.88rem; font-weight: 550; color: var(--ink-soft); }
.field .hint { font-size: 0.8rem; color: var(--muted); }
.input, .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=date], .field textarea, .field select {
  width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font: inherit; font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { min-height: 88px; resize: vertical; }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.form-errors { background: var(--warn-soft); color: var(--warn); border: 1px solid #f1cdbb; border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-bottom: 1.2rem; font-size: 0.9rem; }
.form-errors ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.field_with_errors { display: contents; }
.field_with_errors input, .field_with_errors textarea { border-color: #e2a588; }

/* Flash */
.flash { max-width: 1120px; margin: 1rem auto 0; padding: 0 1.25rem; }
.flash__msg { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.92rem; border: 1px solid; }
.flash__msg--notice { background: var(--accent-soft); color: var(--accent-hover); border-color: #c7dccf; }
.flash__msg--alert { background: var(--warn-soft); color: var(--warn); border-color: #f1cdbb; }

/* Cards & badges */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; background: var(--paper-deep); color: var(--ink-soft); }
.badge--green { background: var(--accent-soft); color: var(--accent); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }

/* The invoice "paper": used in the landing page mock and the customer portal preview */
.paper {
  position: relative; background: #fff; border-radius: 6px; padding: 2rem 2rem 1.6rem;
  box-shadow: var(--shadow-lg); color: var(--ink); font-size: 0.82rem; line-height: 1.5;
}
.paper__head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.paper__seller { font-weight: 650; font-size: 1rem; }
.paper__meta { text-align: right; }
.paper__eyebrow { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.paper__number { font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; }
.paper__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.paper__lines { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.paper__lines th { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: right; padding: 0 0 0.45rem; border-bottom: 1px solid var(--line); }
.paper__lines th:first-child, .paper__lines td:first-child { text-align: left; }
.paper__lines td { padding: 0.55rem 0; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--font-mono); font-size: 0.78rem; }
.paper__lines td:first-child { font-family: var(--font-sans); font-size: 0.82rem; padding-right: 1rem; }
.paper__totals { margin-left: auto; width: min(260px, 100%); display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; font-size: 0.8rem; }
.paper__totals dt { color: var(--muted); }
.paper__totals dd { margin: 0; text-align: right; font-family: var(--font-mono); }
.paper__totals .is-total { color: var(--ink); font-weight: 650; padding-top: 0.4rem; border-top: 1px solid var(--line); }
.paper__footer { margin-top: 1.4rem; padding-top: 0.9rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.74rem; white-space: pre-line; }
.paper__stamp {
  position: absolute; top: 8.6rem; right: 1.6rem; transform: rotate(-9deg);
  border: 2.5px solid var(--stamp); color: var(--stamp); border-radius: 6px;
  padding: 0.1rem 0.6rem; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.22em;
  opacity: 0.82; mix-blend-mode: multiply;
}
.paper__pre { white-space: pre-line; }
.highlight { background: linear-gradient(transparent 55%, #fde7a8 55%); }
@media (max-width: 560px) {
  .paper { padding: 1.3rem 1.1rem; }
  .paper__parties { grid-template-columns: 1fr; }
}

::placeholder { color: var(--faint); opacity: 1; }
.paper__totals { column-gap: 0; }
.paper__totals dd { padding-left: 1rem; }