/* VibeTrade design system. Signature device: the "ascent line" -- an equity
   curve used as both narrative motif and functional gauge, because that is
   literally what a challenge measures (see .ascent-svg usages). */

:root {
  /* --- color: ink (dark, primary surface) --- */
  --ink: #0a0e12;
  --ink-panel: #131922;
  --ink-panel-2: #1a212c;
  --ink-line: #232b36;
  --ink-text: #eef1f4;
  --ink-text-soft: #8b96a5;
  --ink-text-faint: #5b6472;

  /* --- color: paper (light, contrast surface for landing) --- */
  --paper: #f3f1ea;
  --paper-panel: #ffffff;
  --paper-line: #ddd8c9;
  --paper-text: #171512;
  --paper-text-soft: #6b6455;

  /* --- color: semantic accents --- */
  --mint: #35d08c;      /* gain / pass / long */
  --mint-dim: #1c8a5c;
  --ember: #ff6b4a;     /* loss / risk / short */
  --ember-dim: #b5442d;
  --gold: #f2b441;      /* funded / reward */
  --gold-dim: #a67b26;

  /* --- type --- */
  --font-display: "Unbounded", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

/* light theme: redefine the "ink" surface tokens so every component that
   already reads var(--ink-*) re-themes automatically, no per-component
   overrides needed */
:root[data-theme="light"] {
  --ink: #f3f1ea;
  --ink-panel: #ffffff;
  --ink-panel-2: #ece8dc;
  --ink-line: #ddd8c9;
  --ink-text: #171512;
  --ink-text-soft: #6b6455;
  --ink-text-faint: #948d7a;
}

* { box-sizing: border-box; }

body.vt {
  margin: 0;
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body.vt.vt-paper {
  background: var(--paper);
  color: var(--paper-text);
}

.vt-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- layout primitives --- */
.vt-shell { max-width: 480px; margin: 0 auto; padding: 20px 18px 40px; }
.vt-shell-wide { max-width: 960px; margin: 0 auto; padding: 20px 18px 40px; }

.vt-card {
  background: var(--ink-panel);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  padding: 18px;
}
/* .vt-card is a <div> almost everywhere except the admin hub cards
   (templates/admin/index.html use <a class="vt-card">), which otherwise
   fall back to the browser's default link blue/purple/underline -- the
   same "unstyled <a>" trap .tv-logo already has a fix for above. */
a.vt-card, a.vt-card:visited { display: block; color: inherit; text-decoration: none; }

.vt-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-text-faint);
}

/* --- buttons --- */
.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 20px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.vt-btn:active { transform: scale(0.98); }
.vt-btn:disabled { opacity: 0.5; cursor: default; }
.vt-btn-block { width: 100%; }
.vt-btn-mint { background: var(--mint); color: #06170f; }
.vt-btn-ember { background: var(--ember); color: #1a0603; }
.vt-btn-ghost { background: var(--ink-panel-2); color: var(--ink-text); border: 1px solid var(--ink-line); }
.vt-btn-gold { background: var(--gold); color: #241703; }

/* --- badges --- */
.vt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
/* an unconditional author `display` always beats the browser's default
   [hidden]{display:none} -- any badge toggled via el.hidden = true/false
   (e.g. the trainer's "Попытка X/3" run badge) needs this or it never
   actually hides. Same bug class as the account-menu dropdown; fixed at the
   component's source so nothing built on .vt-badge can hit it again. */
.vt-badge[hidden] { display: none; }
.vt-badge-mint { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 40%, transparent); background: color-mix(in srgb, var(--mint) 12%, transparent); }
.vt-badge-ember { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 40%, transparent); background: color-mix(in srgb, var(--ember) 12%, transparent); }
.vt-badge-gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.vt-badge-neutral { color: var(--ink-text-soft); border-color: var(--ink-line); background: var(--ink-panel-2); }

/* --- stat tiles --- */
.vt-stat-label { font-size: 11px; color: var(--ink-text-faint); margin-bottom: 3px; }
.vt-stat-value { font-family: var(--font-mono); font-size: 17px; font-weight: 500; }
.vt-stat-value.mint { color: var(--mint); }
.vt-stat-value.ember { color: var(--ember); }

/* --- form fields --- */
.vt-field { display: block; margin-bottom: 14px; }
.vt-field-label { display: block; font-size: 12px; color: var(--ink-text-soft); margin-bottom: 6px; }
.vt-input, .vt-select {
  width: 100%;
  padding: 11px 12px;
  background: var(--ink);
  border: 1px solid var(--ink-line);
  color: var(--ink-text);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
}
.vt-input:focus, .vt-select:focus, .vt-btn:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 1px;
}
.vt-input.vt-mono { font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}