/* ──────────────────────────────────────────────────────────────────────────
   STRIX design tokens — derived from the open-design "trading-terminal" system
   (github.com/nexu-io/open-design, Apache-2.0), tuned to keep STRIX's cyan.
   Purely additive: provides a token foundation, consistent elevation on cards,
   and an accessible focus ring (STRIX previously used outline:none everywhere).
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces (trading-terminal ramp) */
  --tt-bg: #070b12;
  --tt-surface: #101826;
  --tt-surface-warm: #162238;
  --tt-fg: #f8fafc;
  --tt-fg-2: #cbd5e1;
  --tt-muted: #8492a6;
  --tt-border: #263246;
  --tt-border-soft: #1c2638;

  /* STRIX keeps its cyan identity as the accent */
  --tt-accent: #00f5ff;
  --tt-accent-soft: rgba(0, 245, 255, 0.12);

  /* Canonical trading semantics (replaces STRIX's scattered greens/reds) */
  --tt-success: #22c55e;
  --tt-warn: #f59e0b;
  --tt-danger: #ef4444;

  /* Elevation + focus */
  --tt-elev-ring: 0 0 0 1px var(--tt-border);
  --tt-elev-raised: 0 18px 60px rgba(0, 0, 0, 0.42);
  --tt-focus-ring: 0 0 0 3px rgba(0, 245, 255, 0.30);

  /* Motion */
  --tt-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Accessible focus ring — keyboard users can see where they are.
   Only applies to keyboard focus (:focus-visible), so mouse clicks stay clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--tt-focus-ring);
  border-radius: 8px;
}

/* Consistent, subtle elevation lift on interactive cards across both dashboards.
   Uses existing STRIX class names so it applies without markup changes. */
.feature, .plan, .step, .stat-card, .strat-item, .chart-card, .testimonial,
.mini-card, .tile, .panel {
  transition: transform 0.18s var(--tt-ease), box-shadow 0.18s var(--tt-ease),
              border-color 0.18s var(--tt-ease);
}
.feature:hover, .plan:hover, .step:hover, .testimonial:hover {
  box-shadow: var(--tt-elev-raised);
}

/* Unify P&L semantics so green/red are identical everywhere */
.pnl-pos, .pos, .green, .tick-up, .tick-up2 { color: var(--tt-success) !important; }
.pnl-neg, .neg, .red, .tick-down, .tick-dn { color: var(--tt-danger) !important; }