/* Kinetic — Brand & Website color tokens
 * Import into any stylesheet:  @import "brand-colors.css";
 */

:root {
  /* ---------- Brand colors ---------- */
  --kinetic-cyan: #38bdf8; /* Energy / lightning highlight */
  --kinetic-blue: #4f7cff; /* Primary brand */
  --kinetic-violet: #8b5cf6; /* Secondary brand */
  --kinetic-blue-strong: #3b63e0; /* Pressed / darker blue */
  --kinetic-blue-soft: #8fa6ff; /* Tints, sublabels */

  /* Signature gradient */
  --kinetic-gradient: linear-gradient(90deg, #38bdf8 0%, #4f7cff 50%, #8b5cf6 100%);
  --kinetic-gradient-diagonal: linear-gradient(135deg, #4f7cff 0%, #8b5cf6 100%);

  /* ---------- Website / UI neutrals ---------- */
  --void: #050507; /* App background */
  --space-900: #0b0b10; /* Panels / sections */
  --space-800: #14141b; /* Cards */
  --space-700: #1c1c26; /* Elevated surfaces */
  --hairline: rgba(255, 255, 255, 0.08); /* Borders */
  --glass: rgba(255, 255, 255, 0.04); /* Glass fills */

  /* ---------- Text ---------- */
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1aa;
  --text-muted: #6b7280;

  /* ---------- Semantic (market) ---------- */
  --up: #22c55e; /* Gains */
  --down: #ef4444; /* Losses */
  --warning: #f59e0b; /* Caution */
  --info: #38bdf8; /* Info */
}