/* Site-wide theme variables and shared components */
:root {
  --bg-page: #020617;
  --bg-section: transparent;
  --bg-card: #020617;
  --border-subtle: #1e293b;
  --border-strong: #22d3ee;
  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --accent: #22d3ee;
  --accent-soft-bg: rgba(34, 211, 238, 0.1);
  --shadow-elevated: 0 18px 60px rgba(15, 23, 42, 0.9);
}

:root[data-theme='cyber'] {
  --bg-page: #020617;
  --bg-card: #020617;
  --border-subtle: #1e293b;
  --border-strong: #22d3ee;
  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --accent: #22d3ee;
  --accent-soft-bg: rgba(34, 211, 238, 0.1);
}

:root[data-theme='terminal'] {
  --bg-page: #09090b;
  --bg-card: #18181b;
  --border-subtle: #27272a;
  --border-strong: #22c55e;
  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --accent: #22c55e;
  --accent-soft-bg: rgba(34, 197, 94, 0.1);
}

:root[data-theme='studio'] {
  --bg-page: #02010a;
  --bg-card: #020617;
  --border-subtle: #27272a;
  --border-strong: #6366f1;
  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --accent: #a855f7;
  --accent-soft-bg: rgba(168, 85, 247, 0.12);
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
}

.container { max-width: 1200px; }
.page-bg { background-color: var(--bg-page); }
.text-base-color { color: var(--text-primary); }
.text-muted { color: var(--text-secondary); }

.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.nav-shell { position: sticky; top: 0; z-index: 50; background-color: rgba(2,6,23,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.card { background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 1rem; box-shadow: 0 10px 40px rgba(0,0,0,0.6); transition: transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out; }
.card:hover { transform: translateY(-0.25rem); border-color: var(--border-strong); box-shadow: var(--shadow-elevated); }

.btn-primary { display:inline-flex; align-items:center; justify-content:center; background-color: var(--accent-soft-bg); color: var(--accent); border:1px solid var(--accent); border-radius:9999px; padding:0.75rem 1.75rem; font-weight:600; transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out; }
.btn-primary:hover { background-color: var(--accent); color: var(--bg-page); box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.btn-primary:active { transform: translateY(1px); }

.accent-text { color: var(--accent); }
.nav-link { color: var(--text-secondary); transition: color 150ms ease-out; }
.nav-link:hover { color: var(--accent); }

.theme-chip { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size:0.7rem; line-height:1; color: var(--text-secondary); padding:0.4rem 0.75rem; border-radius:9999px; }
.theme-chip--active { background-color: var(--accent-soft-bg); color: var(--accent); }

.copy-link-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; padding:0.35rem 0.75rem; border:1px solid var(--border-subtle); background-color:transparent; color:var(--text-secondary); font-family:'JetBrains Mono', ui-monospace; font-size:0.7rem; line-height:1; cursor:pointer; }
.copy-link-btn:hover { border-color: var(--border-strong); color: var(--accent); background-color: var(--accent-soft-bg); }

.section-heading { position:relative; display:inline-block; padding-bottom:8px; margin-bottom:24px; }
.section-heading::after { content:''; position:absolute; left:0; bottom:0; width:60%; height:3px; background-color: var(--accent); border-radius:9999px; }
.eyebrow { font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-secondary); }