/**
 * VoltaGrid Theme — Electric Amber × Carbon
 * ==========================================
 * Single source of truth for all web CSS colors.
 * Import this BEFORE styles.css and Tailwind to make variables
 * available everywhere.
 *
 * "Volta" = Alessandro Volta = inventor of the battery = electric amber.
 */

:root {
  /* ── Backgrounds ─────────────────────────────────────────────── */
  --bg-base:        #0a0a0b;    /* Near-black carbon — warmer than slate  */
  --bg-surface:     #111113;    /* Card surfaces                           */
  --bg-elevated:    #1a1a1e;    /* Modals, dropdowns                       */
  --bg-subtle:      #222228;    /* Input fields, secondary areas           */
  --bg-overlay:     rgba(0, 0, 0, 0.82);

  /* ── Primary — Electric Amber ────────────────────────────────── */
  --amber-300:      #fcd34d;
  --amber-400:      #fbbf24;
  --amber-500:      #f59e0b;    /* Primary buttons, key accents            */
  --amber-600:      #d97706;    /* Pressed / active                        */
  --amber-glow:     rgba(245, 158, 11, 0.15);
  --amber-glow-md:  rgba(245, 158, 11, 0.28);
  --amber-glow-lg:  rgba(245, 158, 11, 0.45);

  /* ── Secondary accent — warm orange ─────────────────────────── */
  --orange-500:     #f97316;
  --orange-400:     #fb923c;

  /* ── Semantic — unchanged (users expect these) ───────────────── */
  --green-400:      #34d399;    /* Profit, positive change                 */
  --green-500:      #10b981;
  --red-400:        #f87171;    /* Loss, negative, high risk               */
  --red-500:        #ef4444;
  --yellow-400:     #facc15;    /* Warning, medium volatility              */
  --yellow-500:     #eab308;

  /* ── Text ────────────────────────────────────────────────────── */
  --text-primary:   #f5f5f0;    /* Main content — warm white               */
  --text-secondary: #a8a89a;    /* Subtitles, labels                       */
  --text-muted:     #5c5c52;    /* Timestamps, placeholders                */
  --text-inverse:   #0a0a0b;    /* Dark text on amber buttons              */

  /* ── Borders ─────────────────────────────────────────────────── */
  --border-subtle:  rgba(245, 158, 11, 0.12);
  --border-default: rgba(245, 158, 11, 0.28);
  --border-strong:  rgba(245, 158, 11, 0.5);
  --divider:        rgba(255, 255, 255, 0.06);

  /* ── Gradients ───────────────────────────────────────────────── */
  --gradient-hero:    linear-gradient(135deg, #0a0a0b 0%, #140e03 50%, #0a0a0b 100%);
  --gradient-card:    linear-gradient(145deg, #111113, #1a1a1e);
  --gradient-cta:     linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --gradient-premium: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --gradient-text:    linear-gradient(135deg, #fbbf24, #f97316);

  /* ── Radius ──────────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
}

/* ── Global resets with new palette ───────────────────────────── */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

/* ── Reusable component classes ───────────────────────────────── */

/* Card */
.vg-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(245, 158, 11, 0.05);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.vg-card:hover {
  border-color: var(--border-default);
  box-shadow:
    0 4px 24px var(--amber-glow),
    0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Primary CTA button */
.vg-btn-primary {
  background: var(--gradient-cta);
  color: var(--text-inverse);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
  box-shadow: 0 0 20px var(--amber-glow);
}

.vg-btn-primary:hover {
  box-shadow: 0 0 32px var(--amber-glow-md);
  transform: translateY(-1px);
}

.vg-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 12px var(--amber-glow);
}

/* Secondary / outline button */
.vg-btn-secondary {
  background: transparent;
  color: var(--amber-400);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.vg-btn-secondary:hover {
  background: var(--amber-glow);
  border-color: var(--border-strong);
}

/* Gradient text */
.vg-gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nav/header background */
.vg-nav {
  background: rgba(10, 10, 11, 0.88);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Input field */
.vg-input {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.vg-input:focus {
  outline: none;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

/* Badge — risk level */
.vg-badge-extreme { background: rgba(248, 113, 113, 0.15); color: var(--red-400);    border: 1px solid rgba(248,113,113,0.3); }
.vg-badge-high    { background: rgba(248, 113, 113, 0.1);  color: var(--red-400);    border: 1px solid rgba(248,113,113,0.2); }
.vg-badge-medium  { background: rgba(250, 204, 21, 0.1);   color: var(--yellow-400); border: 1px solid rgba(250,204,21,0.25); }
.vg-badge-low     { background: rgba(52, 211, 153, 0.1);   color: var(--green-400);  border: 1px solid rgba(52,211,153,0.25); }

/* Stale data warning bar */
.vg-stale-banner {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: var(--red-400);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

/* Connection status dot */
.vg-dot-live       { background: var(--green-400); box-shadow: 0 0 6px var(--green-400); }
.vg-dot-connecting { background: var(--yellow-400); }
.vg-dot-offline    { background: var(--red-400); }

/* Price ticker monospace */
.vg-price {
  font-family: 'Space Grotesk', 'Courier New', monospace;
  color: var(--amber-400);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* Section divider */
.vg-divider {
  border: none;
  border-top: 1px solid var(--divider);
}

/* Skeleton loader — amber tinted */
.vg-skeleton {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, #2a2a32 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: vg-shimmer 1.6s infinite;
  border-radius: var(--radius-sm);
}

@keyframes vg-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
}

/* Scrollbar — subtle amber tint on webkit */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: rgba(245, 158, 11, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245, 158, 11, 0.45); }