@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap");

:root {
  color-scheme: dark;
  --saas-bg: #08090c;
  --saas-bg-soft: #0d0f14;
  --saas-surface: rgba(18, 20, 26, 0.76);
  --saas-surface-2: rgba(24, 27, 34, 0.88);
  --saas-surface-3: rgba(33, 37, 46, 0.96);
  --saas-line: rgba(255, 255, 255, 0.08);
  --saas-line-strong: rgba(255, 255, 255, 0.14);
  --saas-text: #edf0f7;
  --saas-muted: #a5abb8;
  --saas-faint: #727987;
  --saas-primary: #f8fafc;
  --saas-primary-text: #0b0d11;
  --saas-success: #9bd6b1;
  --saas-danger: #e8a3a3;
  --saas-warning: #dac472;
  --saas-code-bg: #10131a;
  --saas-code-text: #eef2f8;
  --saas-overlay: rgba(5, 7, 10, 0.72);
  --saas-radius: 10px;
  --saas-radius-sm: 7px;
  --saas-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] {
  color-scheme: light;
  --saas-bg: #f6f7f9;
  --saas-bg-soft: #f0f2f5;
  --saas-surface: rgba(255, 255, 255, 0.78);
  --saas-surface-2: rgba(255, 255, 255, 0.92);
  --saas-surface-3: #e9edf3;
  --saas-line: rgba(15, 23, 42, 0.09);
  --saas-line-strong: rgba(15, 23, 42, 0.16);
  --saas-text: #151821;
  --saas-muted: #697386;
  --saas-faint: #8f98a8;
  --saas-primary: #151821;
  --saas-primary-text: #f8fafc;
  --saas-success: #2f6845;
  --saas-danger: #8f3737;
  --saas-warning: #7b6420;
  --saas-code-bg: #f3f6fa;
  --saas-code-text: #151821;
  --saas-overlay: rgba(15, 23, 42, 0.24);
  --saas-shadow: none;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 18% -12%, rgba(255, 255, 255, 0.07), transparent 48%),
    radial-gradient(760px 520px at 92% 0%, rgba(107, 114, 128, 0.12), transparent 48%),
    linear-gradient(180deg, var(--saas-bg) 0%, var(--saas-bg-soft) 100%) !important;
  color: var(--saas-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  transition: background-color 220ms ease, color 220ms ease !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(900px 520px at 18% -12%, rgba(255, 250, 240, 0.68), transparent 48%),
    radial-gradient(760px 520px at 92% 0%, rgba(221, 214, 200, 0.38), transparent 48%),
    linear-gradient(180deg, var(--saas-bg) 0%, var(--saas-bg-soft) 100%) !important;
}

a {
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--saas-primary) 22%, transparent);
}

.wrap,
.content,
.main,
main {
  color: var(--saas-text);
  padding-left: clamp(18px, 3vw, 32px);
  padding-right: clamp(18px, 3vw, 32px);
}

header,
.top,
.topbar,
.topline,
.nav-shell {
  border-color: var(--saas-line) !important;
  background: color-mix(in srgb, var(--saas-bg) 88%, transparent) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  box-shadow: none !important;
}

.brand,
.title,
.headline,
h1,
h2,
h3,
.panel-title,
.card-value,
.summary-value,
.price {
  color: var(--saas-text) !important;
  letter-spacing: 0 !important;
}

.lead,
.sub,
.subtitle,
.muted,
.panel-sub,
.card-sub,
.profile-meta,
.summary-label,
label,
th,
.side-title,
.eyebrow {
  color: var(--saas-muted) !important;
}

.mark,
.brand-mark {
  background: var(--saas-primary) !important;
  box-shadow: none !important;
}

.sidebar {
  background: color-mix(in srgb, var(--saas-surface-2) 82%, transparent) !important;
  border-color: var(--saas-line) !important;
  box-shadow: none !important;
}

.nav-group,
.nav-item,
.quick-item,
.profile-menu,
.card,
.panel,
.plan,
.metric,
.metric-card,
.summary-card,
.settings-card,
.settings-hero,
.hero-panel,
.stat,
.step,
.mini,
.shell,
.intro,
.endpoint,
.toc,
.command-panel,
.inspector-panel,
.inspector-card {
  background: var(--saas-surface) !important;
  border-color: var(--saas-line) !important;
  color: var(--saas-text) !important;
  border-radius: var(--saas-radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.section,
section {
  background: transparent !important;
  border-color: var(--saas-line) !important;
  box-shadow: none !important;
}

.card::after,
.hero-visual::after {
  display: none !important;
}

.plan.featured,
.nav-item.active {
  border-color: var(--saas-line-strong) !important;
  background: var(--saas-surface-2) !important;
}

.nav-item.active {
  box-shadow: inset 2px 0 0 var(--saas-primary) !important;
}

.nav-item:hover,
.quick-item:hover,
.endpoint:hover,
.endpoint.active,
tbody tr:hover,
.command-item:hover,
.command-item.active {
  background: var(--saas-surface-3) !important;
  border-color: var(--saas-line-strong) !important;
}

.btn,
button,
input,
select,
textarea,
.field,
.select,
.textarea,
.oauth-btn,
.icon-btn,
.profile-btn,
.copy-btn,
.range-pill,
.range-btn,
.project-badge,
.card-pill,
.pill,
.method,
.auth {
  border-color: var(--saas-line) !important;
  border-radius: var(--saas-radius-sm) !important;
  background: var(--saas-surface-2) !important;
  color: var(--saas-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    opacity 150ms ease,
    transform 150ms ease !important;
}

.card,
.panel,
.plan,
.section,
.metric,
.metric-card,
.summary-card,
.settings-card,
.settings-hero,
.hero-panel,
.stat,
.step,
.mini,
.shell,
.intro,
.endpoint,
.toc,
.command-panel,
.inspector-panel,
.inspector-card,
header,
.top,
.topbar,
.topline,
.nav-shell,
.sidebar,
table,
th,
td {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease !important;
}

.btn:hover,
button:hover,
.oauth-btn:hover,
.icon-btn:hover,
.profile-btn:hover,
.copy-btn:hover,
.range-btn:hover {
  background: var(--saas-surface-3) !important;
  border-color: var(--saas-line-strong) !important;
  transform: translateY(-1px) !important;
}

.btn.primary,
button.primary,
button.active,
.primary,
.range-btn.active {
  background: var(--saas-primary) !important;
  border-color: var(--saas-primary) !important;
  color: var(--saas-primary-text) !important;
}

input:focus,
select:focus,
textarea:focus,
.field:focus,
.select:focus,
.textarea:focus,
.command-input:focus {
  border-color: var(--saas-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--saas-primary) 14%, transparent) !important;
}

pre,
code,
.code,
.response,
.action-preview,
.snippet-box {
  border-color: var(--saas-line) !important;
  background: var(--saas-code-bg) !important;
  color: var(--saas-code-text) !important;
  border-radius: var(--saas-radius-sm) !important;
  box-shadow: none !important;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

html[data-theme="light"] pre,
html[data-theme="light"] code,
html[data-theme="light"] .code,
html[data-theme="light"] .response,
html[data-theme="light"] .action-preview,
html[data-theme="light"] .snippet-box {
  background: var(--saas-code-bg) !important;
  color: var(--saas-code-text) !important;
}

.table-wrap,
.recent-wrap,
table,
th,
td {
  border-color: var(--saas-line) !important;
}

.table-wrap,
.recent-wrap,
.card,
.panel,
.plan,
.metric,
.metric-card,
.summary-card,
.settings-card,
.settings-hero,
.hero-panel,
.stat,
.step,
.mini,
.shell,
.intro,
.endpoint,
.toc,
.command-panel,
.inspector-panel,
.inspector-card {
  padding: clamp(18px, 2vw, 24px);
}

th {
  background: var(--saas-surface-2) !important;
  color: var(--saas-muted) !important;
  font-weight: 500 !important;
}

td {
  color: var(--saas-text) !important;
}

.usage-grid {
  background:
    repeating-linear-gradient(to top, color-mix(in srgb, var(--saas-line) 68%, transparent), color-mix(in srgb, var(--saas-line) 68%, transparent) 1px, transparent 1px, transparent 48px),
    var(--saas-surface) !important;
  border-color: var(--saas-line) !important;
}

.usage-bar {
  background: linear-gradient(180deg, var(--saas-primary), var(--saas-muted)) !important;
  border-color: var(--saas-line-strong) !important;
}

.notice,
.toast.error,
html[data-theme="dark"] .danger {
  background: #1f0b0b !important;
  border-color: #7f1d1d !important;
  color: var(--saas-danger) !important;
}

.success,
.toast.success {
  background: #052e16 !important;
  border-color: #14532d !important;
  color: var(--saas-success) !important;
}

html[data-theme="light"] .notice,
html[data-theme="light"] .toast.error {
  background: #f8ece7 !important;
  border-color: #e5b8aa !important;
  color: var(--saas-danger) !important;
}

html[data-theme="light"] .success,
html[data-theme="light"] .toast.success {
  background: #edf5eb !important;
  border-color: #bbd5b7 !important;
  color: var(--saas-success) !important;
}

.toast,
.command-overlay,
.inspector-overlay {
  z-index: 1000 !important;
}

.command-overlay,
.inspector-overlay {
  background: var(--saas-overlay) !important;
}

.profile-menu {
  z-index: 900 !important;
}

.credit-tile {
  background: var(--saas-surface) !important;
  border-color: var(--saas-line) !important;
}

.mono {
  color: var(--saas-text) !important;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

hr {
  border-color: var(--saas-line) !important;
}