/* Shared shell for the signed-out funnel (/start, /login) and the customer
   dashboard (/app). Tokens are the landing page's, so the product does not
   change identity the moment someone converts. */

/* Colour is set twice and only twice: once here, once in the dark block below.
   Everything downstream reads a token, so a shade that is wrong is wrong in one
   place. The `-rgb` triples exist because most of this palette is used at a
   dozen different opacities — a tint is `rgb(var(--accent-rgb) / 0.12)` rather
   than a hardcoded rgba() that a second theme would have no way to follow. */
:root {
  color-scheme: light;

  --bg: #faf8f5;
  --bg-alt: #f5f3ef;
  --surface: #ffffff;
  --surface-hover: #ffffff;

  --ink: #2d3a2e;
  --ink-rgb: 45 58 46;
  --accent: #3d5a3e;
  --accent-rgb: 61 90 62;
  --danger: #8c3b2e;
  --danger-rgb: 140 59 46;
  --warn: #8a6d2f;
  --warn-rgb: 138 109 47;

  /* Text laid on a solid fill of the token it is named for. In light these are
     white; in dark the fills go pale and these go dark, which is the whole
     reason they are tokens and not `#fff`. */
  --on-ink: #ffffff;
  --on-ink-dim: rgb(255 255 255 / 0.35);
  --on-danger: #ffffff;

  --line: rgb(var(--ink-rgb) / 0.08);
  --line-strong: rgb(var(--ink-rgb) / 0.15);
  --muted: rgb(var(--ink-rgb) / 0.6);
  --faint: rgb(var(--ink-rgb) / 0.4);

  --topbar-bg: rgb(250 248 245 / 0.88);
  --ring: rgb(var(--accent-rgb) / 0.1);

  /* Shadows cannot be derived from --ink: in dark a pale ink would paint a halo
     where a shadow belongs, so each theme states its own. */
  --shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.04), 0 8px 24px rgb(var(--ink-rgb) / 0.06);
  --shadow-sm: 0 1px 2px rgb(var(--ink-rgb) / 0.08);
  --shadow-pop: 0 6px 20px rgb(var(--ink-rgb) / 0.22);

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --radius: 14px;
}

/* Dark. Only the values that cannot be derived are restated — the tints, rules
   and muted text all follow --ink-rgb on their own.

   Set deliberately by the dashboard rather than by a `prefers-color-scheme`
   media query: the customer gets an explicit light/dark switch, and a query
   here would drag /start and /login into dark with no way to say otherwise. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #131612;
  --bg-alt: #1c201b;
  --surface: #232823;
  --surface-hover: #2b312a;

  /* Warm off-white rather than #fff — the light theme's paper is warm, and a
     neutral grey here would read as a different product. */
  --ink: #e8eae4;
  --ink-rgb: 232 234 228;
  /* The forest green lifted until it carries text on a dark card (~6:1). */
  --accent: #86b088;
  --accent-rgb: 134 176 136;
  --danger: #e2907e;
  --danger-rgb: 226 144 126;
  --warn: #d9b76e;
  --warn-rgb: 217 183 110;

  --on-ink: #131612;
  --on-ink-dim: rgb(19 22 18 / 0.4);
  --on-danger: #1c0e0a;

  /* A pale rule at 8% disappears against a dark card; the tints that carry
     meaning need a little more of themselves than they do on paper. 0.56 on
     --faint is not a round number — it is the point where the smallest labels
     (stat captions, chart ticks, timestamps) clear 4.5:1 on a card. */
  --line: rgb(var(--ink-rgb) / 0.11);
  --line-strong: rgb(var(--ink-rgb) / 0.2);
  --faint: rgb(var(--ink-rgb) / 0.56);

  --topbar-bg: rgb(19 22 18 / 0.9);
  --ring: rgb(var(--accent-rgb) / 0.22);

  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 26px rgb(0 0 0 / 0.36);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-pop: 0 8px 22px rgb(0 0 0 / 0.55);
}

* { box-sizing: border-box; }

/* A class like `.field { display: flex }` out-specifies the user-agent rule for
   [hidden], so anything toggled with `element.hidden = true` stays on screen.
   This is the one place !important is the right tool. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: none; }
a:hover { opacity: 0.7; }
h1, h2, h3 { font-weight: 300; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
input, textarea, select, button { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: rgb(var(--ink-rgb) / 0.34); }

@keyframes rise    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes wave    { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }

/* ── chrome ──────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  height: 68px; padding: 0 28px;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; align-items: center; gap: 9px; font-size: 20px; letter-spacing: -0.01em; }
.wordmark .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
.topbar .spacer { margin-left: auto; }
.topbar-meta { font-size: 13px; color: var(--muted); }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; letter-spacing: 0.025em; text-transform: uppercase;
  padding: 13px 26px; border-radius: 9999px; border: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s, color 0.15s;
}
.btn-solid { background: var(--ink); color: var(--on-ink); }
.btn-solid:hover:not(:disabled) { background: var(--accent); }
.btn-outline { background: none; border: 1px solid var(--line-strong); }
.btn-outline:hover:not(:disabled) { border-color: var(--ink); }
.btn-ghost { background: none; padding: 8px 14px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); }
.btn-small { padding: 9px 18px; font-size: 12px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-danger { color: var(--danger); }

/* ── forms ───────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.field .hint { font-size: 13px; color: var(--muted); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], textarea, select {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
textarea { resize: vertical; min-height: 120px; line-height: 1.6; font-size: 15px; }
textarea.code { font-family: var(--mono); font-size: 13px; line-height: 1.7; }

.notice { padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.notice-error { background: rgb(var(--danger-rgb) / 0.1); color: var(--danger); }
.notice-warn { background: rgb(var(--warn-rgb) / 0.12); color: var(--warn); }
.notice-ok { background: rgb(var(--accent-rgb) / 0.12); color: var(--accent); }

/* ── surfaces ────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 26px 28px; }

.eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 9999px;
  font-size: 12px; letter-spacing: 0.02em;
  background: var(--bg-alt); color: var(--muted);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-live { background: rgb(var(--accent-rgb) / 0.14); color: var(--accent); }
.pill-live .dot { animation: pulse 1.2s ease-in-out infinite; }
.pill-alert { background: rgb(var(--danger-rgb) / 0.12); color: var(--danger); }

.spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--on-ink-dim);
  border-top-color: var(--on-ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-ink { border-color: rgb(var(--ink-rgb) / 0.2); border-top-color: var(--ink); }

.waveform { display: flex; align-items: center; gap: 3px; height: 16px; }
.waveform span {
  width: 2px; height: 100%; border-radius: 1px; background: var(--accent);
  animation: wave 1s ease-in-out infinite;
}

.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-alt) 25%, rgb(var(--ink-rgb) / 0.07) 50%, var(--bg-alt) 75%);
  background-size: 840px 100%;
  animation: shimmer 1.6s linear infinite;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}