/* ============================================
   FLASHR DESIGN SYSTEM v2
   Zinc Dark + Electric Amber Theme
   ============================================ */

:root {
  /* === COLORS - Zinc Dark Palette === */
  --bg-deep: #09090b;
  --bg-surface: #111113;
  --bg-elevated: #18181b;
  --bg-glass: rgba(24, 24, 27, 0.9);
  --bg-card: rgba(24, 24, 27, 0.85);
  --bg-input: rgba(9, 9, 11, 0.8);

  /* Border colors - zinc scale */
  --border-color: rgba(39, 39, 42, 0.9);
  --border-color-hover: rgba(63, 63, 70, 1);

  /* Primary Accents - Electric Amber */
  --color-yellow-bright: #fbbf24;
  --color-yellow-mid: #f59e0b;
  --color-yellow-dim: rgba(251, 191, 36, 0.1);
  --color-yellow-glow: rgba(251, 191, 36, 0.4);
  --color-yellow-text: #fffbeb;

  /* Semantic Colors */
  --color-success: #34d399;
  --color-danger: #f87171;
  --color-warning: #fbbf24;
  --color-info: #60a5fa;

  /* Text Colors */
  --color-text-primary: #fafafa;
  --color-text-secondary: #e4e4e7;
  --color-text-muted: #a1a1aa;
  --color-text-dark: #09090b;

  /* === SPACING - 8px Base Unit === */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-8: 64px;

  /* === TYPOGRAPHY === */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;
  --font-size-2xl: 36px;
  --font-size-3xl: 52px;
  --font-size-4xl: 72px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* === BORDERS & RADIUS === */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-2xl: 28px;
  --border-radius-full: 999px;

  --border-subtle: 1px solid rgba(39, 39, 42, 0.9);
  --border-highlight: 1px solid rgba(251, 191, 36, 0.4);

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.6);
  --glow-amber: 0 0 20px rgba(251, 191, 36, 0.25);
  --glow-amber-strong: 0 0 40px rgba(251, 191, 36, 0.35);
  --glow-text: 0 0 12px rgba(251, 191, 36, 0.4);

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ============ LIGHT THEME ============ */
[data-theme="light"] {
  --bg-deep: #f4f4f5;
  --bg-surface: #fafafa;
  --bg-elevated: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.92);
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-input: rgba(244, 244, 245, 0.9);
  --border-color: rgba(228, 228, 231, 0.9);
  --border-color-hover: rgba(212, 212, 216, 1);
  --border-subtle: 1px solid rgba(228, 228, 231, 0.9);
  --color-text-primary: #09090b;
  --color-text-secondary: #27272a;
  --color-text-muted: #71717a;
  --color-text-dark: #09090b;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] body {
  background: #f4f4f5;
  color: #09090b;
}

[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at top left, rgba(251, 191, 36, 0.06) 0%, transparent 50%),
    #f4f4f5;
  animation: none;
}

[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] div,
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] th {
  color: var(--color-text-secondary);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: var(--color-text-primary);
}

[data-theme="light"] .glass-card,
[data-theme="light"] .flashr-card,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .metric-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .glass-card-elevated,
[data-theme="light"] .performance-container,
[data-theme="light"] .chart-container,
[data-theme="light"] .trend-indicator-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(228, 228, 231, 0.9) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"] {
  background: rgba(244, 244, 245, 0.9) !important;
  border-color: rgba(228, 228, 231, 0.9) !important;
  color: #09090b !important;
}

[data-theme="light"] .flashr-nav::before {
  background: rgba(250, 250, 250, 0.98) !important;
}

[data-theme="light"] .flashr-nav {
  border-bottom: 1px solid rgba(228, 228, 231, 0.9) !important;
}

[data-theme="light"] .text-muted { color: #71717a !important; }
[data-theme="light"] .text-secondary { color: #27272a !important; }
[data-theme="light"] .text-primary { color: #09090b !important; }

/* === GLOBAL STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #09090b;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--bg-deep);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition-slow), color var(--transition-slow);
}

/* IMPROVED TEXT VISIBILITY */
p, span, div, li, td, th {
  color: var(--color-text-secondary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

/* Ensure labels and secondary text are visible */
label, .label, .stat-label, .setting-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(251, 191, 36, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 90%, rgba(251, 191, 36, 0.04) 0%, transparent 50%),
    var(--bg-deep);
  z-index: -1;
  pointer-events: none;
  transition: background var(--transition-slow);
}

/* === CARD PATTERN === */
.glass-card,
.flashr-card,
.dashboard-card,
.metric-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  padding: var(--space-5);
}

.glass-card:hover,
.flashr-card:hover,
.dashboard-card:hover {
  border-color: rgba(251, 191, 36, 0.25);
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-elevated),
    0 0 0 1px rgba(251, 191, 36, 0.15);
}

/* === BUTTONS === */
button {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: var(--border-radius-md);
}

.btn-primary,
#loop-btn,
button[data-action="loop"] {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: var(--color-text-dark);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-base);
}

.btn-primary:hover,
#loop-btn:hover {
  box-shadow: 0 6px 24px rgba(251, 191, 36, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px) scale(1.02);
}

.btn-danger,
#unwind-btn,
button[data-action="unwind"] {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
  box-shadow: var(--shadow-card);
}

.btn-danger:hover,
#unwind-btn:hover {
  box-shadow: var(--shadow-card), 0 0 15px rgba(239, 68, 68, 0.3);
  transform: translateY(-2px);
}

.btn-secondary,
.btn-ghost {
  background: var(--bg-elevated);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card);
}

.btn-secondary:hover {
  background: var(--bg-glass);
  border-color: rgba(251, 191, 36, 0.4);
  color: var(--color-text-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* === FINANCIAL DATA - ENHANCED VISIBILITY === */
.price,
.balance,
.value,
.amount,
[data-type="financial"],
.stat-value,
.crypto-price-value,
.chart-current-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Make large financial numbers even more prominent */
.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 800;
}

.crypto-price-value {
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.chart-current-price {
  font-size: var(--font-size-2xl);
  font-weight: 800;
}

/* === TEXT GLOW === */
.text-glow,
.flashr-logo,
h1.hero-title {
  text-shadow: var(--glow-text);
}

/* === FORMS & INPUTS === */
input,
select,
textarea {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  background: var(--bg-input);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-base);
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1), 0 4px 16px rgba(0, 0, 0, 0.3);
  background: rgba(17, 17, 17, 0.8);
}

input[type="number"] {
  font-family: var(--font-mono);
}

/* === NAVIGATION === */
nav,
.top-nav,
header {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border-bottom: var(--border-subtle);
}

/* === UTILITY CLASSES === */
.bg-deep { background: var(--bg-deep); }
.bg-surface { background: var(--bg-surface); }
.bg-glass { background: var(--bg-glass); }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

.font-mono { font-family: var(--font-mono); }

/* === TABLES - IMPROVED READABILITY === */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

th {
  background: var(--bg-glass);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

td {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

tr:hover td {
  background: rgba(251, 191, 36, 0.12);
  color: var(--color-text-primary);
  transform: scale(1.01);
}

/* === CRYPTO PRICE DISPLAYS === */
.crypto-tf-value {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-text-primary) !important;
}

.crypto-price-value {
  font-size: var(--font-size-2xl) !important;
  font-weight: 800 !important;
  color: var(--color-text-primary) !important;
}

/* === PERFORMANCE METRICS === */
.perf-metric {
  font-size: var(--font-size-base) !important;
  color: var(--color-text-secondary) !important;
}

.perf-metric span {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-text-primary) !important;
}

/* === SETTING VALUES === */
.setting-value {
  font-size: var(--font-size-2xl) !important;
  font-weight: 800 !important;
  color: var(--color-text-primary) !important;
}

/* === IMPROVE ALL TEXT CONTRAST === */
.text-muted {
  color: #cbd5e1 !important;
}

.text-secondary {
  color: #f1f5f9 !important;
}

/* === P/L DISPLAYS - ENHANCED VISIBILITY === */
.pnl-positive,
.profit-positive,
.positive {
  color: #10b981 !important;
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--font-size-lg) !important;
}

.pnl-negative,
.profit-negative,
.negative {
  color: #ef4444 !important;
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--font-size-lg) !important;
}

/* === IMPROVE INPUT VISIBILITY === */
input[type="number"],
input[type="text"],
input[type="email"],
select {
  font-size: var(--font-size-base) !important;
  color: var(--color-text-primary) !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
select:focus {
  border-color: var(--color-yellow-bright) !important;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.3) !important;
}