/* ===== R777 THEME — Deep Teal Styling ===== */
:root{
  /* Brand - Bright Teal */
  --primary:#19c9bd;
  --primary-dark:#0e9d94;
  --accent:#2ee6d6;
  --accent-glow:rgba(46, 230, 214, 0.4);
  --danger:#ef4444;
  --success:#10b981;
  --warning:#f59e0b;

  /* Backgrounds - Deep Teal */
  --bg:#01282b;
  --bg-2:#04383b;

  /* Glassmorphism Cards */
  --card:rgba(4, 56, 59, 0.6);
  --card-2:rgba(8, 76, 79, 0.6);
  --header-bg:rgba(1, 40, 43, 0.85);
  --sidebar-bg:#01282b;
  --bottomnav-bg:rgba(1, 40, 43, 0.9);

  /* Text */
  --text:#ffffff;
  --text-muted:#93b8b8;
  --text-soft:#daeceb;

  /* Border */
  --border:rgba(255, 255, 255, 0.08);
  --border-soft:rgba(255, 255, 255, 0.04);
  --border-glow:rgba(25, 201, 189, 0.3);

  /* Sizes */
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;

  /* Header / Bottom nav heights */
  --header-h:64px;
  --bottomnav-h:72px;

  /* Container */
  --max-w:480px;

  /* Shadows & Gradients */
  --shadow:0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow:0 0 20px var(--accent-glow);
  --logo-gold:linear-gradient(135deg, #a9f7ef, #19c9bd);
  --btn-gradient:linear-gradient(135deg, #19c9bd, #0e9d94);
  --btn-gradient-hover:linear-gradient(135deg, #4fe3d8, #19c9bd);
  --glass-filter:blur(16px);
}

/* Light page variant (Used optionally, kept premium) */
.theme-light{
  --bg:#eef6f5;
  --bg-2:#ffffff;
  --card:rgba(255, 255, 255, 0.8);
  --card-2:rgba(226, 242, 240, 0.8);
  --text:#04282b;
  --text-muted:#5c7d7d;
  --text-soft:#2c4f50;
  --border:rgba(0, 0, 0, 0.08);
  --border-soft:rgba(0, 0, 0, 0.04);
  --header-bg:rgba(255, 255, 255, 0.85);
  --bottomnav-bg:rgba(255, 255, 255, 0.95);
  --shadow:0 8px 32px rgba(0, 0, 0, 0.08);
}