.theme-signer {
  --sg-paper: #faf9f6;
  --sg-paper-2: #f1efe9;
  --sg-ink: #1c1917;
  --sg-body: #44403a;
  --sg-dim: #6b655d;
  --sg-wax: #8c2f1b;
  --sg-wax-2: #712514;
  --sg-rule: #e2ded5;
  --sg-rule-2: #cbc5b8;
  --bg-app: var(--sg-paper);
  --surface: #ffffff;
  --surface-2: var(--sg-paper);
  --surface-3: var(--sg-paper-2);
  --text: var(--sg-ink);
  --text-2: var(--sg-body);
  --text-3: var(--sg-body);
  --text-mid: var(--sg-dim);
  --text-muted: var(--sg-dim);
  --text-faint: var(--sg-dim);
  --text-faint2: var(--sg-dim);
  --icon-faint: var(--sg-dim);
  --brand: var(--sg-wax);
  --brand-hover: var(--sg-wax-2);
  --brand-ink: var(--sg-wax-2);
  --brand-tint: #f6e9e5;
  --brand-tint-2: #f0ddd7;
  --brand-tint-3: var(--sg-paper-2);
  --brand-border: var(--sg-rule-2);
  --brand-ring: rgba(140, 47, 27, .35);
  --brand-avatar-bg: #f0ddd7;
  --on-brand: #ffffff;
  --hairline: var(--sg-rule);
  --border-1: var(--sg-rule);
  --border-2: var(--sg-rule);
  --border-3: var(--sg-rule-2);
  --border-4: var(--sg-dim);
  --rule-heavy: var(--sg-ink);
  --ok: #166b47;
  --ok-tint: #e7f2ec;
  --info: var(--sg-ink);
  --info-tint: var(--sg-paper-2);
  --warn: #8a5200;
  --warn-tint: #f7efdd;
  --danger: #a62317;
  --danger-tint: #f9e7e4;
  --destruct: #a62317;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-prose: Georgia, "Times New Roman", serif;
}

.sg-doc-frame {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface);
}

.sg-sign-panel {
  border-top: 2px solid var(--rule-heavy);
  padding-top: 1rem;
}