/*
 * Mailwarden design system — monochrome, mobile-first.
 *
 * WHY NO SERIF, AND NO ACCENT COLOUR
 *
 * Look at what actually ships in this category: Linear, Vercel, Notion, Height,
 * Raycast, Stripe, Superhuman. Every one uses a single sans family and a
 * near-monochrome palette. Nobody in productivity software sets headings in a
 * display serif — Playfair and its relatives read as editorial, fashion, or
 * wedding stationery, and on a tool they read as "someone chose a font" rather
 * than "this is well built".
 *
 * The convergence is not laziness, it is that a utility earns trust by getting
 * out of the way. So: one sans, one neutral ramp, and the only "colour" is
 * contrast. The primary button is near-black on light and near-white on dark,
 * which is exactly the Vercel/Linear pattern and needs no accent hue at all.
 *
 * Semantic colour survives in three places only, because these carry meaning
 * that shape alone cannot: danger, warning, and safe.
 */

:root {
  /* ── Neutral ramp. Everything is built from these. ───────────────── */
  --n-0: #ffffff;
  --n-50: #fafaf9;
  --n-100: #f3f3f1;
  --n-200: #e7e6e3;
  --n-300: #d2d1cd;
  --n-500: #78776f;
  --n-700: #45443f;
  --n-900: #1c1c1a;
  --n-950: #131312;

  --bg: var(--n-50);
  --surface: var(--n-0);
  --raised: var(--n-100);
  --border: var(--n-200);
  --text: var(--n-950);
  --muted: var(--n-500);

  /* Contrast IS the accent. No hue required. */
  --accent: var(--n-950);
  --accent-fg: var(--n-0);
  --accent-text: var(--n-950);
  --accent-soft: var(--n-100);

  --danger: #b42318;
  --warn: #b54708;
  --safe: #067647;

  --brand-tile: var(--n-950);
  --brand-ink: var(--n-0);

  --radius: 12px;
  --radius-sm: 9px;

  /*
   * One family, system-first. Inter if the OS has it, otherwise the platform
   * UI face — which is what GitHub, Basecamp and Notion ship. No webfont means
   * no flash of unstyled text, no CSP exception, and nothing to download before
   * the page is usable.
   */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surface ladder per spec: base / surface / elevated.
       Text is #EDEDED rather than #F5F5F5 — on #0A0A0A that is ~16:1 instead of
       ~18:1. Both clear AAA by a wide margin; the lower one avoids the halation
       that made the previous build read as harsh. */
    --bg: #0a0a0a;
    --surface: #111113;
    --raised: #18181b;
    --border: #26262a;
    --text: #ededed;
    --muted: #a1a1aa;

    --accent: #ededed;
    --accent-fg: #0a0a0a;
    --accent-text: #ededed;
    --accent-soft: #18181b;

    --danger: #e59a90;
    --warn: #d9b36a;
    --safe: #86c2a1;

    --brand-tile: #ededed;
    --brand-ink: #0a0a0a;
  }
}

/* ── Base ──────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Fluid type. clamp() means one rule covers 360px to 1440px without a stack of
 * breakpoints, and the minimum is chosen so nothing ever wraps mid-word on a
 * small phone. Tight tracking on large text is the single change that most
 * makes an interface look considered rather than default.
 */
h1 {
  font-size: clamp(1.45rem, 4.5vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 620;
  margin: 0 0 10px;
}
h2 {
  font-size: clamp(1rem, 2.6vw, 1.12rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 30px 0 10px;
}
h3 { font-size: 1rem; font-weight: 630; letter-spacing: -0.01em; margin: 0 0 8px; }
p { margin: 0 0 14px; }

a { color: var(--accent-text); text-underline-offset: 2px; }

/* Never let a long address or reference force the page to scroll sideways. */
.break { overflow-wrap: anywhere; }

/* ── Layout ────────────────────────────────────────────────────────── */

.wrap {
  max-width: 720px;
  margin: 0 auto;
  /* Generous on desktop, tight on a phone where every pixel of width counts. */
  padding: clamp(24px, 6vw, 56px) clamp(16px, 5vw, 24px) 80px;
}
.wrap.wide { max-width: 960px; }

.lede {
  font-size: clamp(1rem, 3.4vw, 1.12rem);
  color: var(--muted);
  margin: 0 0 28px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 4.5vw, 22px);
  margin-bottom: 14px;
}

.muted { color: var(--muted); font-size: .9rem; }
.hidden { display: none !important; }

/* ── Brand lockup ──────────────────────────────────────────────────── */

.brand {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.brand-tile {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--brand-tile);
  color: var(--brand-ink);
  flex-shrink: 0;
}
.brand-tile svg { width: 24px; height: 24px; display: block; }
.brand-word {
  font-weight: 660;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

/* ── Controls ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 620;
  font-size: .98rem;
  cursor: pointer;
  text-decoration: none;
  /* 44px is the minimum comfortable touch target. */
  min-height: 44px;
}
.btn:hover:not(:disabled) { opacity: .88; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost {
  background: none;
  color: var(--text);
  border-color: var(--border);
}
.btn.ghost:hover:not(:disabled) { background: var(--raised); opacity: 1; }
.btn.block { width: 100%; }

input, select, textarea {
  font: inherit;
  /* 16px minimum: anything smaller makes iOS Safari zoom the whole page on
     focus, which is the most common way a form feels broken on a phone. */
  font-size: 16px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  min-height: 44px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ── Small screens ─────────────────────────────────────────────────── */

@media (max-width: 560px) {
  /* Side-by-side buttons become a stack; a 48%-wide button with wrapped text
     is worse than a full-width one. */
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  h2 { margin-top: 26px; }
}

/* Wide content must scroll inside its own box, never move the page. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }