/* === BASE — shared foundation (UXW2 / OVERHAUL W2, D-F3) ===
   The stylesheet every standalone page starts from: reset, body, type, buttons, forms, card.
   Token-driven — tokens.css must load first. The app shell (app.css) carries these same values
   in its own rules until a later wave converges them; this file is the canonical reference. */

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; }
.mono, .num { font-family: var(--font-body); font-variant-numeric: tabular-nums; } /* SOC-4 DL-1: money, dates and counts in the body font — mono is for code (code.mono, the Curve key box, the forwarding address) */
code.mono { font-family: var(--font-mono); }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: var(--fs-body); color: var(--text); }

/* === BUTTONS — the ONE grammar (4 levels, no fifth) ===
   .btn-primary  solid gold — THE one forward action per view (<= 1)
   .btn-secondary bordered neutral — all other actions
   .btn-quiet    borderless tertiary/inline
   .btn-danger   bordered red — destructive */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--gold); color: var(--on-gold);
  font-weight: 600; font-size: var(--fs-body);
  padding: 11px 22px; border-radius: var(--r-sm); min-height: 44px;
  transition: background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn-primary:hover { background: var(--gold-soft); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
  font-weight: 500; font-size: var(--fs-body);
  padding: 10px 18px; border-radius: var(--r-sm); min-height: 44px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-secondary:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  background: transparent; color: var(--muted);
  font-weight: 500; font-size: var(--fs-body);
  padding: 8px 12px; border-radius: var(--r-sm); min-height: 44px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn-quiet:hover { color: var(--text); background: var(--surface-2); }
.btn-quiet:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-quiet:disabled { opacity: .5; cursor: not-allowed; }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: transparent; color: var(--danger);
  border: 1px solid var(--danger);
  font-weight: 500; font-size: var(--fs-body);
  padding: 10px 18px; border-radius: var(--r-sm); min-height: 44px;
  transition: background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn-danger:hover { background: var(--danger-tint); }
.btn-danger:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }

.btn-sm { padding: 6px 14px; font-size: var(--fs-small); min-height: 36px; }

/* === FORMS === */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.form-label, .form-group label {
  font-size: var(--fs-micro); color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.form-input, input[type="email"], input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  min-height: 40px;
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: var(--focus); }

/* === CARD === */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
}

/* === EMPTY VALUE — "—" with the reason on hover === */
.ev { color: var(--faint); }

/* === LINK BUTTON (tertiary text action, e.g. login "use a different e-mail") === */
.link-btn {
  color: var(--muted); font-size: var(--fs-body);
  padding: 8px; text-align: center;
  transition: color var(--t-fast) var(--ease);
  min-height: 44px;
}
.link-btn:hover { color: var(--text); }
.link-btn:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }