/* IM/POSSIBLE CHECKER — variables.css */

/* ============================================================
   IM/POSSIBLE CHECKER — style.css
   Font stack: Syne (brand) · Plus Jakarta Sans (body) · JetBrains Mono (code)
   Aesthetic: Dark terminal · Neon accents · Glassmorphism
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */

:root {
  --bg-base:       #080b10;
  --bg-surface:    #0d1117;
  --bg-card:       #111820;
  --bg-card-hover: #141e28;
  --bg-input:      #0c1219;
  --border:        rgba(0, 210, 255, 0.10);
  --border-active: rgba(0, 210, 255, 0.35);

  --cyan:          #00d2ff;
  --cyan-glow:     rgba(0, 210, 255, 0.20);
  --cyan-dim:      rgba(0, 210, 255, 0.60);
  --green:         #00ff88;
  --green-dim:     rgba(0, 255, 136, 0.15);
  --red:           #ff3b5c;
  --red-dim:       rgba(255, 59, 92, 0.15);
  --orange:        #ffaa00;
  --orange-dim:    rgba(255, 170, 0, 0.15);

  --text-primary:   #e8edf5;
  --text-secondary: #6b7a90;
  --text-mono:      #a0c4d8;

  --font-brand:  'Syne', sans-serif;
  --font-body:   'Plus Jakarta Sans', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --transition:  0.2s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE THEME
   ══════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  --bg-base:       #eef2f7;
  --bg-surface:    #f5f7fb;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8faff;
  --bg-input:      #f0f4fa;
  --border:        rgba(0,0,0,0.08);
  --border-active: rgba(0,150,200,0.45);
  --cyan:          #0090c0;
  --cyan-glow:     rgba(0,144,192,0.15);
  --cyan-dim:      rgba(0,144,192,0.8);
  --text-primary:  #1a2332;
  --text-secondary:#5a6a80;
  --text-mono:     #2a4a65;
}

html[data-theme="light"] body { color: var(--text-primary); }

html[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}

html[data-theme="light"] .bg-glow {
  background: radial-gradient(ellipse, rgba(0,144,192,0.07) 0%, transparent 70%);
}

html[data-theme="light"] .auth-card,
html[data-theme="light"] .dash-card,
html[data-theme="light"] .left-panel,
html[data-theme="light"] .changelog-panel,
html[data-theme="light"] .account-panel,
html[data-theme="light"] .progress-section,
html[data-theme="light"] .result-container,
html[data-theme="light"] .admin-table-wrap,
html[data-theme="light"] .dash-stat-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

html[data-theme="light"] .cred-input,
html[data-theme="light"] .form-input,
html[data-theme="light"] .keyword-input,
html[data-theme="light"] .search-input,
html[data-theme="light"] .dash-search-input { color: var(--text-primary); }