/* ─────────────────────────────────────────────────
 *  html-collab-editor · design system v2
 *  Goal: a calm chrome that doesn't visually fight
 *  the user-uploaded HTML inside the canvas.
 *  Soft borders, light fills, generous whitespace.
 * ───────────────────────────────────────────────── */

:root {
  /* surface */
  --ink:          #1a1a1a;
  --ink-soft:     #44403c;
  --paper:        #fafaf9;
  --panel:        #ffffff;
  --panel-2:      #f5f5f4;
  --rule:         #e7e5e4;
  --rule-strong:  #d6d3d1;
  --muted:        #57534e;
  --subtle:       #a8a29e;

  /* accent (single hue) */
  --signal:       #ff5a1f;
  --signal-soft:  #fff1ec;
  --signal-ink:   #b34100;

  /* status (functional only) */
  --ok:           #0a7d3f;
  --warn:         #b45309;
  --error:        #b91c1c;

  /* typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-md:   15px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-display: 44px;

  /* geometry */
  --unit:    4px;
  --gutter:  20px;
  --radius:  8px;
  --radius-sm: 4px;
  --rule-w:  1px;

  /* elevation */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-lift: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
}

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

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Small monospace UI label (counts, badges, status) */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--panel);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 100ms, border-color 100ms, color 100ms, box-shadow 100ms;
}
.btn:hover { background: var(--panel-2); border-color: var(--ink-soft); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper); }

.btn-signal {
  background: var(--signal);
  color: #fff;
  border-color: var(--signal);
}
.btn-signal:hover { background: var(--signal-ink); border-color: var(--signal-ink); }

.btn-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-ghost:hover { background: var(--panel-2); border-color: var(--rule); }

.btn-lg {
  height: 48px;
  padding: 0 28px;
  font-size: var(--text-md);
  font-weight: 600;
  border-radius: var(--radius);
}

/* ── Panel / card ───────────────────────────────── */
.panel {
  background: var(--panel);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ── Inputs ─────────────────────────────────────── */
input[type=text], input[type=email], textarea {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
  padding: 10px 12px;
  background: var(--panel);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  outline: none;
  transition: border-color 100ms, box-shadow 100ms;
  width: 100%;
}
input:focus, textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06);
}

/* ── Selection ──────────────────────────────────── */
::selection {
  background: var(--signal-soft);
  color: var(--signal-ink);
}