/**
 * Krypto Green Theme - Custom CSS
 * Based on design_doc.txt specifications
 */

/* ===== FONT IMPORTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  /* Krypto Green Brand Colors */
  --krypto-green: #00ff88;
  --krypto-green-hover: #00cc6e;
  --krypto-green-muted: #1a3d2e;
  --krypto-green-glow: rgba(0, 255, 136, 0.15);
  --krypto-green-glow-strong: rgba(0, 255, 136, 0.3);
  
  /* Dark Theme Backgrounds */
  --bg-primary: #0a0e17;
  --bg-secondary: #131720;
  --bg-tertiary: #1a1f2e;
  --border-color: #252b3b;
  
  /* Text Colors */
  --text-primary: #e8eaed;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  
  /* Trading Colors */
  --bullish: #26a69a;
  --bearish: #ef5350;
  --warning: #ffa726;
  
  /* Light Theme (for toggle) */
  --light-bg-primary: #ffffff;
  --light-bg-secondary: #f8f9fa;
  --light-bg-tertiary: #f1f3f5;
  --light-border: #e5e7eb;
  --light-text-primary: #1f2937;
  --light-text-secondary: #4b5563;
  --light-text-tertiary: #9ca3af;
  --light-krypto-green: #00d97e;
  --light-krypto-green-hover: #00b368;
}

/* ===== BASE STYLES ===== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--text-primary);
}

/* Monospace for numbers and data */
.font-mono,
.price,
.percentage,
.data-value {
  font-family: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;
}

/* ===== KRYPTO GREEN UTILITIES ===== */
.text-krypto-green {
  color: var(--krypto-green);
}

.bg-krypto-green {
  background-color: var(--krypto-green);
}

.border-krypto-green {
  border-color: var(--krypto-green);
}

.hover\:bg-krypto-green:hover {
  background-color: var(--krypto-green);
}

.hover\:text-krypto-green:hover {
  color: var(--krypto-green);
}

.hover\:border-krypto-green:hover {
  border-color: var(--krypto-green);
}

/* Krypto Green Glow Effect */
.glow-krypto {
  box-shadow: 0 0 15px var(--krypto-green-glow);
}

.glow-krypto-strong {
  box-shadow: 0 0 30px var(--krypto-green-glow-strong);
}

/* ===== BUTTONS ===== */
.btn-krypto-primary {
  background-color: var(--krypto-green);
  color: #000000;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  border: none;
  cursor: pointer;
}

.btn-krypto-primary:hover {
  background-color: var(--krypto-green-hover);
  box-shadow: 0 0 20px var(--krypto-green-glow);
  transform: translateY(-1px);
}

.btn-krypto-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

.btn-krypto-secondary:hover {
  border-color: var(--krypto-green);
  background-color: var(--krypto-green-muted);
}

.btn-krypto-ghost {
  background-color: transparent;
  color: var(--text-secondary);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
  border: none;
  cursor: pointer;
}

.btn-krypto-ghost:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ===== CARDS ===== */
.card-krypto {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
}

.card-krypto:hover {
  border-color: rgba(0, 255, 136, 0.3);
}

.card-krypto-elevated {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* ===== INPUTS ===== */
.input-krypto {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
  width: 100%;
}

.input-krypto:focus {
  outline: none;
  border-color: var(--krypto-green);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.input-krypto::placeholder {
  color: var(--text-tertiary);
}

/* Number inputs use monospace */
input[type="number"].input-krypto {
  font-family: 'JetBrains Mono', monospace;
}

/* ===== TABLES ===== */
.table-krypto {
  width: 100%;
  border-collapse: collapse;
}

.table-krypto thead {
  background-color: var(--bg-tertiary);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-krypto th,
.table-krypto td {
  padding: 1rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.table-krypto tbody tr {
  transition: background-color 0.15s ease-in-out;
}

.table-krypto tbody tr:hover {
  background-color: rgba(26, 31, 46, 0.5);
}

/* ===== TRADING COLORS ===== */
.text-bullish {
  color: var(--bullish);
}

.text-bearish {
  color: var(--bearish);
}

.text-warning {
  color: var(--warning);
}

.bg-bullish {
  background-color: var(--bullish);
}

.bg-bearish {
  background-color: var(--bearish);
}

.bg-warning {
  background-color: var(--warning);
}

/* ===== BADGES ===== */
.badge-krypto {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-bullish {
  background-color: rgba(38, 166, 154, 0.2);
  color: var(--bullish);
}

.badge-bearish {
  background-color: rgba(239, 83, 80, 0.2);
  color: var(--bearish);
}

.badge-krypto-green {
  background-color: var(--krypto-green-muted);
  color: var(--krypto-green);
}

/* ===== LIVE INDICATOR ===== */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.live-indicator::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--krypto-green);
  border-radius: 9999px;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px var(--krypto-green-glow);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 20px var(--krypto-green-glow-strong);
  }
}

/* ===== TRANSITIONS ===== */
.transition-krypto {
  transition: all 0.2s ease-in-out;
}

.transition-krypto-fast {
  transition: all 0.15s ease-in-out;
}

.transition-krypto-smooth {
  transition: all 0.3s ease-in-out;
}

/* ===== LIGHT THEME (Optional) ===== */
.light-theme {
  background-color: var(--light-bg-primary);
  color: var(--light-text-primary);
}

.light-theme .card-krypto {
  background-color: var(--light-bg-secondary);
  border-color: var(--light-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.light-theme .btn-krypto-primary {
  background-color: var(--light-krypto-green);
}

.light-theme .btn-krypto-primary:hover {
  background-color: var(--light-krypto-green-hover);
}

.light-theme .input-krypto {
  background-color: var(--light-bg-tertiary);
  border-color: var(--light-border);
  color: var(--light-text-primary);
}

.light-theme .table-krypto thead {
  background-color: var(--light-bg-tertiary);
}

.light-theme .table-krypto th,
.light-theme .table-krypto td {
  border-color: var(--light-border);
}

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 640px) {
  .card-krypto {
    padding: 1rem;
  }
  
  .btn-krypto-primary,
  .btn-krypto-secondary,
  .btn-krypto-ghost {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }
  
  .table-krypto th,
  .table-krypto td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
}