/* =====================================================================
 * Seller-cards — unified theme («operational ERP», the card-studio look)
 * ---------------------------------------------------------------------
 * Single source of truth for the visual language of every static page.
 * Include AFTER the page's own <style>:
 *
 *     <link rel="stylesheet" href="/theme.css" />
 *
 * …and the legacy per-page Wise token blocks are re-mapped onto the
 * studio palette (see card-studio/index.html §4: dense panels on panels,
 * mono accents, Inter, 14px base, 6/8px radii, light + dark themes).
 *
 * Rules of engagement:
 *   - Theme changes go HERE, never into per-page <style> blocks.
 *   - Only visual properties (color/type/radius/border/shadow) may be
 *     overridden; layout belongs to the pages.
 *   - The dark theme uses the same localStorage key as the studio
 *     («theme»), set by the tiny boot snippet in each page's <head>.
 * ===================================================================== */

/* ── studio palette (canonical names) + Wise-name aliases ── */
:root {
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --border-strong: #b9bec7;
  --text: #16181d;
  --accent-soft: #ede9fe;
  --ok: #047857;      --ok-soft: #d1fae5;
  --warn: #b45309;    --warn-soft: #fef3c7;
  --danger: #b91c1c;  --danger-soft: #fee2e2;

  /* legacy Wise token names → studio values */
  --bg: #f2f3f5;
  --surface: #ffffff;
  --surface-warm: #f7f8fa;
  --fg: #16181d;
  --fg-2: #16181d;
  --muted: #6b7280;
  --meta: #6b7280;
  --border: #d8dbe0;
  --border-soft: #d8dbe0;
  --accent: #7c3aed;
  --accent-on: #ffffff;
  --accent-hover: #6d28d9;
  --accent-active: #5b21b6;
  --success: #047857;

  --font-display: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-4xl: 30px;
  --leading-body: 1.45;
  --leading-tight: 1.2;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 0 0 1px var(--border), 0 1px 4px rgba(15, 17, 21, 0.06);
  --focus-ring: 0 0 0 2px var(--accent-soft);
}

/* ── dark theme (same tokens as the studio) ── */
html[data-theme="dark"] {
  --panel: #171a20;
  --panel-2: #1e222a;
  --border: #2c313b;
  --border-soft: #2c313b;
  --border-strong: #3d4450;
  --text: #e5e7eb;
  --bg: #0f1115;
  --surface: #171a20;
  --surface-warm: #1e222a;
  --fg: #e5e7eb;
  --fg-2: #e5e7eb;
  --muted: #9ca3af;
  --meta: #9ca3af;
  --accent: #a78bfa;
  --accent-on: #14101f;
  --accent-hover: #c4b5fd;
  --accent-active: #8b5cf6;
  --accent-soft: #2a2350;
  --ok: #34d399;      --ok-soft: #123529;
  --warn: #fbbf24;    --warn-soft: #3a2c10;
  --danger: #f87171;  --danger-soft: #3b1515;
  --success: #34d399;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 0 0 1px var(--border), 0 1px 4px rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 2px var(--accent-soft);
}

/* ── base ── */
html, body { font-size: 14px; line-height: 1.45; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── navigation → studio topbar (48px, solid panel, hairline border) ── */
.nav {
  background: var(--panel);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav-inner { min-height: 48px; padding: 0 20px; }
.logo { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.nav-links { gap: 16px; }
.nav-links a, .nav-link { font-size: 13px; font-weight: 500; }
.nav-links a:hover, .nav-link:hover { color: var(--accent); text-decoration: underline; }
.nav-link.active { color: var(--accent); }
.user-name { font-size: 12px; font-weight: 600; }
.user-credits, .subtitle { font-size: 11px; }

/* ── buttons → studio actions (6px radius, no bouncy transforms) ── */
.btn, .btn-logout, .btn-back {
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  transition: none;
}
.btn:hover, .btn:active, .btn-logout:hover, .btn-back:hover { transform: none; }
.btn-primary { background: var(--accent); color: #ffffff; }
.btn-primary:hover { background: var(--accent-hover); transform: none; }
.btn-primary:active { background: var(--accent-active); transform: none; }
.btn-primary:disabled { background: var(--accent); color: #ffffff; opacity: 0.55; }
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:disabled { color: #14101f; }
.btn-secondary, .btn-logout, .btn-back {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover, .btn-logout:hover, .btn-back:hover {
  background: var(--panel-2);
  border-color: var(--border-strong);
}
.btn-danger { background: transparent; border: 1px solid transparent; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.cta-btn { padding: 10px 22px; font-size: 14px; }

/* ── forms → studio fields ── */
.form-group label, .form-label { font-size: 12px; font-weight: 600; }
.form-group input, .form-group textarea, .form-group select,
.form-input, .form-textarea, .code-input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 10px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
.form-input:focus, .form-textarea:focus, .code-input:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
  box-shadow: none;
}
.code-input { font-family: var(--font-mono); letter-spacing: 0.35em; }
.form-error { color: var(--danger); font-size: 11px; }

/* ── surfaces → studio panels (white card, hairline border, 8px radius) ── */
.card, .project-card, .auth-card, .modal, .modal-content, .plan-card,
.feature-card, .form-section, .table-container {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
}
.modal, .modal-content { box-shadow: 0 10px 32px rgba(15, 17, 21, 0.25); }
.auth-container { background: var(--bg); }
.modal-overlay { background: rgba(15, 17, 21, 0.5); }

/* ── headings → dense ERP type ── */
h1, h2, h3 { font-weight: 700; }
.page-header h1 { font-size: 22px; line-height: 1.25; }
.modal h2, .modal-title { font-size: 16px; }
.empty-state h2 { font-size: 16px; font-weight: 600; }
.project-card h3 { font-size: 15px; font-weight: 600; }
.table-container th { background: var(--panel-2); font-size: 12px; font-weight: 600; }
.table-container td { font-size: 13px; }

/* ── landing specifics ── */
.hero h1 {
  font-size: clamp(26px, 4.5vw, 34px);
  line-height: 1.15;
  font-weight: 800;
}
.hero p { font-size: 15px; }
.hero h1 .accent { color: var(--accent); font-style: normal; }
.footer { background: #16181d; }
.footer p { color: rgba(255, 255, 255, 0.65); }

/* ── status chips / badges → studio soft chips ── */
.credit-badge { background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.admin-badge { font-family: var(--font-mono); font-size: 11px; }
.generation-card .status.running,
.generation-card .status.qa_running,
.prompt-badge, .prompt-badge-custom { background: var(--accent-soft); color: var(--accent); }

/* ── text links that used the old dark-on-green accent ── */
.form-footer a, .resend-note button { color: var(--accent); }
.resend-note button:disabled { color: var(--muted); }
.history-item .score { color: var(--accent); }

/* ── misc ── */
.toast { border-radius: 6px; font-size: 13px; }
.toast.error { color: #ffffff; }
.loading { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }