/* ═══════════════════════════════════════════════════════════════════════
   CLARINET · Shared Design System
   Modern B2B SaaS aesthetic. Inter for UI, JetBrains Mono for
   scores / ids / technical figures only. Dark mode, 4px spacing grid,
   four-level text hierarchy, alpha borders, muted semantic colors.
   Imported from app.html, auth.html, orgs.html.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --bg:        #0a0b10;
  --bg-elev-1: #111218;   /* cards, primary surfaces */
  --bg-elev-2: #181a22;   /* inputs, nested surfaces */
  --bg-elev-3: #202331;   /* hover / pressed */
  --surface:   var(--bg-elev-1);   /* compat */
  --surface2:  var(--bg-elev-2);   /* compat */

  /* Borders (alpha so they adapt across elevations) */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text:     #ebedf2;
  --text-2:   #b4bac8;
  --text-3:   #7d8497;
  --text-4:   #5b6173;
  --text-dim: var(--text-3);   /* compat */

  /* Accent */
  --accent:        #8b9aff;
  --accent-strong: #6c80ff;
  --accent-weak:   rgba(139, 154, 255, 0.14);
  --accent-dim:    var(--accent-strong);   /* compat */

  /* Semantic */
  --success: #4ec9a4; --success-bg: rgba(78, 201, 164, 0.12);
  --warning: #e8b25a; --warning-bg: rgba(232, 178, 90, 0.12);
  --danger:  #e86a6a; --danger-bg:  rgba(232, 106, 106, 0.12);
  --green: var(--success); --green-bg: var(--success-bg);
  --yellow: var(--warning); --yellow-bg: var(--warning-bg);
  --red: var(--danger); --red-bg: var(--danger-bg);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* Type scale */
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px;
  --fs-md: 15px; --fs-lg: 17px;  --fs-xl: 22px;  --fs-display: 30px;

  /* Space scale */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radii */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.25);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 28px rgba(0,0,0,0.4);

  /* Motion */
  --t: 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ─── Reset + base ─────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Typography helpers ───────────────────────────────────────────────── */
.display { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--text); }
.h1      { font-size: var(--fs-xl);      font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.h2      { font-size: var(--fs-lg);      font-weight: 600; color: var(--text); }
.subtle  { color: var(--text-3); }
.mono    { font-family: var(--font-mono); letter-spacing: 0; }

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev-2);
  color: var(--text-2);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--t);
}
.btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--bg-elev-3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
  font-weight: 600;
  padding: 12px 24px;
  font-size: var(--fs-md);
  box-shadow: 0 4px 16px rgba(108, 128, 255, 0.25);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 24px rgba(108, 128, 255, 0.35);
}
.btn-primary:disabled {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text-4);
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }

.btn-danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger-bg); }

.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); font-weight: 500; }
.btn-block { display: block; width: 100%; }

/* ─── Form inputs ──────────────────────────────────────────────────────── */
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
input::placeholder, textarea::placeholder { color: var(--text-4); }
textarea { resize: vertical; min-height: 72px; line-height: 1.55; }

label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}

.field { margin-bottom: var(--sp-4); }

/* ─── Card ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: border-color var(--t);
}
.card:hover { border-color: var(--border-strong); }

/* ─── Nav links (header) ───────────────────────────────────────────────── */
.nav-link {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--t), color var(--t);
}
.nav-link:hover { background: var(--bg-elev-2); color: var(--text); }
.nav-link.active { color: var(--text); background: var(--bg-elev-2); }

/* ─── Status pills ─────────────────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: transparent;
}
.pill-accent  { color: var(--accent);  border-color: var(--accent);  background: var(--accent-weak); }
.pill-success { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.pill-warning { color: var(--warning); border-color: var(--warning); background: var(--warning-bg); }
.pill-danger  { color: var(--danger);  border-color: var(--danger);  background: var(--danger-bg); }

/* ─── Auth helpers: the feedback message row used across forms ─────────── */
.msg { font-size: var(--fs-sm); min-height: 1.2em; margin-top: var(--sp-3); }
.msg.err { color: var(--danger); }
.msg.ok  { color: var(--success); }

/* ─── Utility ──────────────────────────────────────────────────────────── */
.row { display: flex; gap: var(--sp-3); }
.row > * { flex: 1; }