/* Elovar site design system — obsidian-gold, no webfonts, no external requests.
   Palette tokens mirror src/theme.js `obsidian-gold` exactly. */
:root {
  --navy-1: #0a0e18; --navy-2: #12172a; --navy-3: #1e2440;
  --gold: #c9a659; --gold-hi: #f1c96b; --gold-deep: #6b5324;
  --gold-line: rgba(201,166,89,.22); --gold-line-strong: rgba(201,166,89,.55);
  --gold-glow: rgba(241,201,107,.55);
  --jade: #5cbf67; --garnet: #e35b6a;
  --pearl: #eadfc0; --pearl-dim: #b5ad8e; --ash: #7a8098;
  --font-body: system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --radius: 10px;
  --space-1: 8px; --space-2: 16px; --space-3: 28px; --space-4: 48px; --space-5: 84px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0; background: var(--navy-1); color: var(--pearl);
  font: 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-3); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--pearl); margin: 0; }
a { color: var(--gold-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; border-radius: 2px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 14px var(--space-3);
  background: color-mix(in srgb, var(--navy-1) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-line);
}
.wordmark { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .02em; color: var(--pearl); }
.wordmark b { color: var(--gold-hi); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }

.lang-toggle { display: inline-flex; border: 1px solid var(--gold-line); border-radius: 999px; overflow: hidden; }
.lang-toggle button {
  background: none; border: 0; color: var(--pearl-dim); font: 600 .75rem/1 var(--font-body);
  letter-spacing: .08em; padding: 7px 12px; cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--navy-3); color: var(--gold-hi); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; border: 0; border-radius: var(--radius); cursor: pointer;
  font: 700 .95rem/1 var(--font-body); padding: 13px 22px; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #14100a; box-shadow: 0 0 0 1px var(--gold-line-strong), 0 4px 18px rgba(0,0,0,.4); }
.btn--primary:hover { box-shadow: 0 0 0 1px var(--gold-line-strong), 0 4px 22px var(--gold-glow); }
.btn--ghost { background: var(--navy-3); color: var(--pearl); border: 1px solid var(--gold-line); }
.btn--danger { background: transparent; color: var(--garnet); border: 1px solid color-mix(in srgb, var(--garnet) 45%, transparent); }
.btn--danger:hover { background: color-mix(in srgb, var(--garnet) 12%, transparent); }
.btn:disabled { opacity: .45; cursor: wait; transform: none; }

/* ---------- structure ---------- */
.section { padding: var(--space-5) 0 0; }
.eyebrow {
  font: 700 .72rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 var(--space-1);
}
.section-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-2); }
.hairline { border: 0; border-top: 1px solid var(--gold-line); margin: var(--space-3) 0; }

.card {
  background: var(--navy-2); border: 1px solid var(--gold-line);
  border-radius: var(--radius); padding: var(--space-3);
}

/* ---------- forms ---------- */
.field { display: block; margin: var(--space-2) 0 0; }
.field > span { display: block; font-size: .85rem; color: var(--pearl-dim); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 11px 12px; border-radius: 8px;
  border: 1px solid var(--gold-line); background: var(--navy-1); color: var(--pearl); font-size: 1rem;
}
.field input:focus, .field select:focus { border-color: var(--gold-line-strong); outline: none; }
.form-status { min-height: 1.4em; margin-top: var(--space-2); font-size: .9rem; }
.form-status.ok { color: var(--jade); }
.form-status.err { color: var(--garnet); }

/* ---------- overlay demo frame (signature element) ---------- */
.overlay-frame {
  position: relative; display: inline-block; padding: 14px;
  background: radial-gradient(120% 140% at 50% 0%, var(--navy-3) 0%, var(--navy-1) 70%);
  border: 1px solid var(--gold-line-strong); border-radius: 4px;
  box-shadow: 0 0 40px rgba(0,0,0,.55), inset 0 0 24px rgba(0,0,0,.35);
}
.overlay-frame::before, .overlay-frame::after,
.overlay-frame .tick-b::before, .overlay-frame .tick-b::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--gold-hi); border-style: solid;
}
.overlay-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.overlay-frame::after { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.overlay-frame .tick-b::before { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.overlay-frame .tick-b::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
/* Demo/preview iframes are decorative — let clicks reach the surrounding
   control (gallery cards are <button>s; an iframe would swallow the click). */
.overlay-frame iframe { display: block; border: 0; width: 460px; height: 160px; background: transparent; pointer-events: none; }
.frame-caption { display: block; margin-top: 10px; text-align: center; font-size: .78rem; color: var(--ash); letter-spacing: .04em; }

/* scale fixed-size widget frames down: the widget renders at a fixed 460×160,
   so shrink via transform; boxes sized to scale × 460/160 + padding */
@media (max-width: 720px) {
  .overlay-frame { padding: 12px; width: 356px; height: 139px; overflow: hidden; }
  .overlay-frame iframe { transform: scale(.72); transform-origin: 0 0; }
}
@media (max-width: 560px) {
  main { padding: 0 var(--space-2); }
  .card { padding: var(--space-2); }
  .site-header { padding: 12px var(--space-2); }
  .site-header .btn { display: none; } /* hero CTA is one scroll away; toggle stays */
  .overlay-frame { padding: 10px; width: 260px; height: 104px; }
  .overlay-frame iframe { transform: scale(.52); }
}

/* ---------- url chips + copy ---------- */
.url-chip {
  display: flex; align-items: center; gap: var(--space-1);
  background: var(--navy-1); border: 1px solid var(--gold-line); border-radius: 8px;
  padding: 10px 12px; margin: var(--space-1) 0;
}
.url-chip code { flex: 1; font: .85rem/1.4 var(--font-mono); color: var(--gold-hi); word-break: break-all; user-select: all; }
.copy-btn {
  flex: none; background: var(--navy-3); color: var(--pearl); border: 1px solid var(--gold-line);
  border-radius: 6px; font: 600 .75rem/1 var(--font-body); padding: 7px 10px; cursor: pointer;
}
.copy-btn.copied { color: var(--jade); border-color: color-mix(in srgb, var(--jade) 50%, transparent); }

/* ---------- faq ---------- */
.faq details { border-bottom: 1px solid var(--gold-line); padding: var(--space-2) 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--pearl); list-style: none; display: flex; justify-content: space-between; gap: var(--space-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold); font-family: var(--font-mono); }
.faq details[open] summary::after { content: '\2212'; }
.faq p { color: var(--pearl-dim); margin: var(--space-1) 0 0; max-width: 65ch; }

/* ---------- grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 720px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: var(--space-1);
  border: 1px solid var(--gold-line-strong); color: var(--gold-hi);
  font: 700 .95rem/1 var(--font-display);
}

/* ---------- danger zone ---------- */
.danger-zone {
  border: 1px solid color-mix(in srgb, var(--garnet) 35%, transparent);
  border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-top: var(--space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap;
}
.danger-zone p { margin: 0; color: var(--pearl-dim); font-size: .88rem; }

/* ---------- theme swatches (dashboard) ---------- */
.swatches { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: 6px; }
.swatch {
  width: 76px; padding: 8px 6px 6px; border-radius: 8px; cursor: pointer; text-align: center;
  background: var(--navy-1); border: 1px solid var(--gold-line); color: var(--pearl-dim); font-size: .68rem;
}
.swatch i { display: block; height: 22px; border-radius: 4px; margin-bottom: 5px; }
.swatch[aria-pressed="true"] { border-color: var(--gold-hi); color: var(--pearl); }

/* ---------- integrations card ---------- */
.integration-card .head { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.integration-card .platform-name { font-weight: 700; color: var(--pearl); }
.integration-card .status { font-size: .85rem; color: var(--pearl-dim); }
.integration-card .row { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-2) 0; }
.integration-card .row input[type="range"] { flex: 1; accent-color: var(--gold); }
.integration-card .row input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; }
/* Brand accents for YouTube (red) + Kick (green) — text-label cards, no icon assets yet,
   so the accent lives on .platform-name rather than an <img> filter. */
.integration-card[data-platform="youtube"] .platform-name { color: var(--garnet); }
.integration-card[data-platform="kick"] .platform-name { color: var(--jade); }

/* ---------- custom commands (bot builder) ---------- */
.builtins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-1) var(--space-2); margin-top: 6px; }
.builtin-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--pearl-dim); }
.builtin-check input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; flex: none; }

.cmd-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cmd-row {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  background: var(--navy-1); border: 1px solid var(--gold-line); border-radius: 8px;
  padding: 10px 12px;
}
.cmd-row-name { font: 700 .9rem/1 var(--font-mono); color: var(--gold-hi); flex: none; }
.cmd-row-preview { flex: 1 1 160px; min-width: 140px; color: var(--pearl-dim); font-size: .85rem; }
.cmd-row-toggle { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--pearl-dim); flex: none; }
.cmd-row-toggle input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; }
.cmd-row .btn { padding: 7px 12px; font-size: .8rem; flex: none; }
.cmd-empty { color: var(--pearl-dim); font-size: .9rem; margin: var(--space-2) 0 0; }

.cmd-add { margin-top: var(--space-3); }
.cmd-add textarea {
  width: 100%; padding: 11px 12px; border-radius: 8px; resize: vertical;
  border: 1px solid var(--gold-line); background: var(--navy-1); color: var(--pearl); font: 1rem/1.5 var(--font-body);
}
.cmd-add textarea:focus { border-color: var(--gold-line-strong); outline: none; }
.var-hint {
  font: .85rem/1.5 var(--font-mono); color: var(--gold-hi);
  background: var(--navy-1); border: 1px dashed var(--gold-line); border-radius: 6px;
  padding: 8px 10px; margin: var(--space-1) 0 0; min-height: 1.4em; word-break: break-word;
}
.cmd-add .btn { margin-top: var(--space-2); }

/* ---------- goal overlay (session/subs/follows targets) ---------- */
.hint { color: var(--pearl-dim); font-size: .85rem; margin: 6px 0 var(--space-2); }

/* ---------- footer ---------- */
.site-footer {
  margin-top: var(--space-5); padding: var(--space-3);
  border-top: 1px solid var(--gold-line);
  color: var(--ash); font-size: .8rem; text-align: center;
}
.site-footer a { color: var(--pearl-dim); margin: 0 var(--space-1); }