/*
 * KnotFin theme contract — served at the STABLE URL /theme.css.
 *
 * This file is the single source of truth for KnotFin's design tokens and
 * base element styles. The web app loads it (index.html) and PLUGINS link it
 * from their own pages:
 *
 *   <link rel="stylesheet" href="/theme.css">
 *
 * so a plugin's UI inherits the current theme dynamically — restyle KnotFin
 * here and every plugin follows on its next page load, no plugin updates.
 *
 * CONTRACT RULES (documented in docs/developing-plugins.md):
 *  - The custom property NAMES below and the .btn/.badge class families are a
 *    published API for plugins: rename/remove = breaking change, values may
 *    change freely.
 *  - Keep this file dependency-free and small; SPA-specific styles belong in
 *    src/styles/index.css.
 */

:root {
  --color-bg: #0f0f0f;
  --color-surface: #181818;
  --color-surface-hover: #222;
  --color-surface-raised: #252525;
  --color-border: #2a2a2a;
  --color-text: #e8e8e8;
  --color-text-muted: #b8c0c8;
  --color-text-dim: #95a0aa;
  --color-accent: #4f8ff7;
  --color-accent-hover: #6ba3ff;
  --color-error: #e54545;
  --color-success: #45b85c;
  --color-warning: #e5a545;
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 60px;
  --topbar-height: 58px;
  --radius: 8px;
  --radius-sm: 4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── Buttons ── */

.btn {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn--primary { background: var(--color-accent); color: white; }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--secondary { background: var(--color-surface-raised); color: var(--color-text); }
.btn--secondary:hover { background: var(--color-surface-hover); }
.btn--ghost { background: transparent; color: var(--color-text-muted); padding: 8px; }
.btn--ghost:hover { color: var(--color-text); background: var(--color-surface-hover); }
.btn--large { padding: 12px 28px; font-size: 1rem; font-weight: 600; border-radius: var(--radius); }
.btn--compact { padding: 6px 10px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Badges ── */

.badge {
  display: inline-block;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.badge--success {
  background: rgba(78, 172, 108, 0.18);
  color: var(--color-success);
}

.badge--muted {
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
}

/* ── Form elements ── */

input, select, textarea {
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

textarea {
  resize: vertical;
}

label {
  display: block;
  margin-bottom: 12px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}