/* b4d-theme.css — Shared theme for Careiti webapp */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --bg: #0f0e1a;
  --bg2: #1C1917;
  --card: rgba(255,255,255,.06);
  --card-border: rgba(255,255,255,.1);
  --primary: #4f46e5;
  --primary2: #7c3aed;
  --text: #fff;
  --text2: rgba(255,255,255,.65);
  --text3: rgba(255,255,255,.4);
}

/* ── Light Theme Overrides ──────────────────────────────────── */
[data-theme="light"] {
  --bg: #FAFAF7;
  --bg2: #F5F5F0;
  --card: rgba(255,255,255,.92);
  --card-border: rgba(13,148,136,.15);
  --primary: #0D9488;
  --primary2: #14B8A6;
  --text: #1C1917;
  --text2: rgba(28,25,23,.68);
  --text3: rgba(28,25,23,.42);
}
[data-theme="light"] body {
  background: #FAFAF7 !important;
  color: #1C1917;
}
[data-theme="light"] .bnav-dark {
  background: rgba(250,250,247,.96);
  border-top-color: rgba(13,148,136,.12);
}
[data-theme="light"] .bnav-dark .bnav-item {
  color: rgba(28,25,23,.42);
}
[data-theme="light"] .loading-screen {
  background: #FAFAF7;
}

/* ── Light Mode: Fix hardcoded dark-only text & card colors ───── */
/* Section labels (rgba(255,255,255,.35/.45) pattern) */
[data-theme="light"] .section-title,
[data-theme="light"] .section-hd {
  color: rgba(28,25,23,.45) !important;
}
/* Secondary body text */
[data-theme="light"] .game-desc,
[data-theme="light"] .card-desc,
[data-theme="light"] .sub-text,
[data-theme="light"] .meta,
[data-theme="light"] .stat-label,
[data-theme="light"] .reward-desc,
[data-theme="light"] .friend-meta {
  color: rgba(28,25,23,.6) !important;
}
/* Arrow / tertiary icon text */
[data-theme="light"] .game-arrow {
  color: rgba(28,25,23,.3) !important;
}
/* Tags on colored cards: keep as-is (colored card bg, white tag is fine) */
/* Glass card background */
[data-theme="light"] .glass-card {
  background: rgba(255,255,255,.75);
  border-color: rgba(13,148,136,.12);
}
/* Dark body default override (pages that set body{background:#0f0e1a;color:#fff}) */
[data-theme="light"] body {
  background: #FAFAF7 !important;
  color: #1C1917 !important;
}
/* Containers / page backgrounds */
[data-theme="light"] .container,
[data-theme="light"] .page-content {
  color: #1C1917;
}
/* Coming-soon game cards */
[data-theme="light"] .game-coming {
  background: linear-gradient(135deg,#e5e7eb,#d1d5db) !important;
  color: #374151 !important;
}
[data-theme="light"] .game-coming .game-title,
[data-theme="light"] .game-coming .game-desc {
  color: #374151 !important;
}
/* Feature grid cards (platform shortcuts) */
[data-theme="light"] .feature-card {
  color: #fff;
}
/* friend cards */
[data-theme="light"] .friend-card {
  background: rgba(255,255,255,.85);
  border-color: rgba(13,148,136,.15);
  color: #1C1917;
}
[data-theme="light"] .friend-name {
  color: #1C1917 !important;
}
/* Reward / modal text */
[data-theme="light"] .reward-title,
[data-theme="light"] .reward-pts {
  color: #1C1917 !important;
}
/* Input fields */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #fff;
  color: #1C1917;
  border-color: rgba(13,148,136,.25);
}
[data-theme="light"] input::placeholder {
  color: rgba(28,25,23,.4);
}

/* ── Keyframe Animations ────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Utility Animation Classes ──────────────────────────────── */
.anim-fade       { animation: fadeIn  .35s ease both; }
.anim-up         { animation: slideUp .35s ease both; }
.anim-zoom       { animation: zoomIn  .3s  ease both; }
.anim-slide-down { animation: slideDown .3s ease both; }

/* ── Stagger Delays ─────────────────────────────────────────── */
.anim-d1 { animation-delay: .05s; }
.anim-d2 { animation-delay: .10s; }
.anim-d3 { animation-delay: .15s; }
.anim-d4 { animation-delay: .20s; }
.anim-d5 { animation-delay: .25s; }
.anim-d6 { animation-delay: .30s; }

/* ── Modal Enter ────────────────────────────────────────────── */
.modal-enter {
  animation: zoomIn .28s ease both, fadeIn .28s ease both;
}

/* ── Glass Card ─────────────────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
}

/* ── Section Header ─────────────────────────────────────────── */
.section-hd {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── Loading Screen ─────────────────────────────────────────── */
.loading-screen {
  position: fixed;
  inset: 0;
  background: #0f0e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: #0D9488;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Dark Bottom Nav ────────────────────────────────────────── */
.bnav-dark {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15,14,26,.95);
  backdrop-filter: blur(20px);
  display: flex;
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 -2px 20px rgba(0,0,0,.4);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.bnav-dark .bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 8px;
  text-decoration: none;
  color: rgba(255,255,255,.4);
}
.bnav-dark .bnav-item.active {
  color: #0D9488;
}
.bnav-dark .bnav-item.bnav-active {
  color: #0D9488;
}
.bnav-dark .bnav-icon {
  font-size: 22px;
  margin-bottom: 1px;
}
.bnav-dark .bnav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* ── High Contrast Mode ─────────────────────────────────────── */
/* Activated by data-contrast="high" on <html> */
[data-contrast="high"] {
  --bg: #000;
  --bg2: #111;
  --card: #1a1a1a;
  --card-border: #fff;
  --primary: #ffff00;
  --primary2: #ffdd00;
  --text: #fff;
  --text2: #e0e0e0;
  --text3: #bbb;
}
[data-contrast="high"] body {
  background: #000;
  color: #fff;
}
[data-contrast="high"] .game-card,
[data-contrast="high"] .feat-card {
  border: 2px solid #fff !important;
  background: #111 !important;
}
[data-contrast="high"] .bnav-dark {
  background: #000;
  border-top: 2px solid #fff;
}
[data-contrast="high"] input,
[data-contrast="high"] select,
[data-contrast="high"] textarea {
  background: #000 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
[data-contrast="high"] .btn,
[data-contrast="high"] button:not(.font-toggle-btn):not(.contrast-toggle-btn) {
  outline: 2px solid #ffff00;
}

/* Floating accessibility buttons */
.contrast-toggle-btn {
  position: fixed;
  top: 62px;
  right: 14px;
  z-index: 200;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  letter-spacing: -.5px;
}
.contrast-toggle-btn.active {
  background: rgba(255,255,0,.2);
  border-color: #ffff00;
  color: #ffff00;
}