/* Shared terminal theme for the Jame stack */
:root {
  --terminal-bg: #f4f5f6;
  --terminal-bg-2: #ffffff;
  --terminal-ink: #1d1d1f;
  --terminal-ink-soft: #424245;
  --terminal-line: rgba(0,0,0,0.08);
  --terminal-line-soft: rgba(0,0,0,0.05);
  --terminal-accent: #ff6600;
  --terminal-accent-2: #e65c00;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(180deg, var(--terminal-bg) 0%, var(--terminal-bg-2) 100%) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  color: var(--terminal-ink) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(255,102,0,0.06), transparent 18%),
    radial-gradient(circle at bottom right, rgba(0,0,0,0.02), transparent 20%);
  opacity: 0.9;
}

a {
  color: inherit;
}

a:hover {
  color: var(--terminal-accent-2);
}

nav,
.topbar,
.nav-wrap,
.panel,
.hero,
.features,
.install,
footer,
.login-panel,
.docs-shell,
.right-rail,
.ask-bar,
.code-panel,
.workspace-card,
.feature,
.install-card,
.story-card,
.feedback-panel,
.hero-card,
.mini-terminal,
.card,
.blog-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--terminal-line) !important;
  color: var(--terminal-ink) !important;
}

nav,
.topbar,
.nav-wrap {
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(16px);
}

section,
main,
footer {
  position: relative;
}

section::before,
main::before,
footer::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(0,0,0,0.04);
}

h1,
h2,
h3,
h4,
.logo,
.brand,
.section-title,
.label,
.eyebrow,
.hero-badge,
.btn,
.footer-inner,
.footer-links,
.brand-by,
.nav-links,
.nav-links a,
.nav-right,
.task-chip strong,
.install-step strong,
.feature h3,
.story-card h3,
.feedback-head h3 {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

h1,
h2,
h3,
h4 {
  text-transform: uppercase;
  letter-spacing: -0.04em;
}

h1 {
  color: #1d1d1f !important;
}

.section-title,
.label,
.eyebrow,
.hero-badge,
.brand em,
.logo em,
.feature-icon,
.proof-pill svg,
.task-chip strong,
.install-step strong,
.term-title,
.cmd-prompt,
.cmd-ok,
.cmd-muted {
  color: var(--terminal-accent) !important;
}

.hero p,
.section-sub,
.feature p,
.install-step p,
.task-chip span,
.proof-pill,
.brand-by,
.nav-links a,
.footer,
.feedback-head p {
  color: var(--terminal-ink-soft) !important;
}

.btn {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  background: transparent !important;
  color: #1d1d1f !important;
}

.btn-primary {
  background: var(--terminal-accent) !important;
  color: #ffffff !important;
  border-color: var(--terminal-accent) !important;
}

.btn-outline,
.btn-ghost {
  background: transparent !important;
  color: #1d1d1f !important;
}

.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-ghost:hover {
  background: #1d1d1f !important;
  color: #ffffff !important;
  border-color: #1d1d1f !important;
}

.hero,
.features,
.install,
footer {
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

.hero-card,
.install-card,
.feature,
.task-chip,
.install-step,
.proof-pill,
.feedback-panel,
.feedback-close,
.feedback-input,
.feedback-select,
.feedback-textarea,
.card,
.workspace-card,
.story-card,
.docs-shell,
.code-panel,
.login-panel,
.ask-bar,
.right-rail {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.feature:hover,
.install-step:hover,
.task-chip:hover,
.workspace-card:hover,
.story-card:hover {
  background: rgba(0,0,0,0.03) !important;
}

.feature-icon,
.term-dot.red {
  background: var(--terminal-accent) !important;
}

.term-dot.yellow {
  background: #ffbd2e !important;
}

.term-dot.green {
  background: #28c840 !important;
}

.mini-terminal,
.code-block,
.code-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

input,
textarea,
select,
.feedback-input,
.feedback-select,
.feedback-textarea {
  background: rgba(0,0,0,0.02) !important;
  color: #1d1d1f !important;
  border-color: rgba(0,0,0,0.12) !important;
}

input:focus,
textarea:focus,
select:focus,
.feedback-input:focus,
.feedback-select:focus,
.feedback-textarea:focus {
  border-color: var(--terminal-accent) !important;
  box-shadow: 0 0 0 3px rgba(255,102,0,0.14) !important;
  outline: none !important;
}

img {
  filter: none;
}

@media (max-width: 900px) {
  .nav-links {
    display: none !important;
  }
}