/*
 * VYVE Theme Variables — theme.css
 *
 * Include this before any page-specific CSS.
 * All portal pages use these tokens. Brand accent colours never change between themes.
 *
 * Usage: <link rel="stylesheet" href="/theme.css"/>
 */
/* ─── BRAND ACCENTS (fixed — same in both themes) ─────────────────────── */
:root {
  --teal:    #1B7878;
  --teal-lt: #4DAAAA;
  --teal-xl: #7AC8C8;
  --green:   #2D9E4A;
  --amber:   #E09B3D;
  --coral:   #E06060;
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}
/* ─── DARK THEME (default — VYVE portal is dark-first) ────────────────── */
:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg:          #0A1F1F;
  --bg2:         #0D2B2B;
  --bg-gradient: radial-gradient(ellipse 80% 60% at 10% -10%, rgba(27,120,120,0.18) 0%, transparent 60%),
                 radial-gradient(ellipse 60% 40% at 90% 80%, rgba(27,120,120,0.10) 0%, transparent 55%),
                 radial-gradient(ellipse 100% 100% at 50% 50%, #0A1F1F 0%, #071616 100%);
  /* Surfaces / cards */
  --surface:       rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.07);
  --surface-teal:  rgba(27,120,120,0.12);
  --surface-teal-hover: rgba(27,120,120,0.20);
  /* Borders */
  --border:      rgba(255,255,255,0.08);
  --border-teal: rgba(77,170,170,0.20);
  /* Text */
  --text:        #FFFFFF;
  --text-muted:  rgba(255,255,255,0.45);
  --text-faint:  rgba(255,255,255,0.25);
  /* Navigation */
  --nav-bg:      rgba(10,31,31,0.85);
  --nav-bg-mob:  rgba(8,24,24,0.97);
  --nav-border:  rgba(77,170,170,0.12);
  --nav-text:    rgba(255,255,255,0.38);
  --nav-active:  #4DAAAA;
  /* More menu */
  --more-bg:     #0A1F1F;
  /* Misc */
  --white: #FFFFFF;
  --input-bg: rgba(255,255,255,0.05);
  --input-border: rgba(255,255,255,0.12);
}
/* ─── LIGHT THEME ─────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg:          #F0FAF8;
  --bg2:         #E0F2EE;
  --bg-gradient: radial-gradient(ellipse 80% 60% at 10% -10%, rgba(27,120,120,0.08) 0%, transparent 60%),
                 radial-gradient(ellipse 60% 40% at 90% 80%, rgba(27,120,120,0.05) 0%, transparent 55%),
                 radial-gradient(ellipse 100% 100% at 50% 50%, #F0FAF8 0%, #E8F6F2 100%);
  /* Surfaces / cards */
  --surface:       rgba(27,120,120,0.06);
  --surface-hover: rgba(27,120,120,0.10);
  --surface-teal:  rgba(27,120,120,0.12);
  --surface-teal-hover: rgba(27,120,120,0.18);
  /* Borders */
  --border:      rgba(27,120,120,0.15);
  --border-teal: rgba(27,120,120,0.28);
  /* Text */
  --text:        #0A1F1F;
  --text-muted:  rgba(10,31,31,0.65);
  --text-faint:  rgba(10,31,31,0.30);
  /* Navigation */
  --nav-bg:      rgba(240,250,248,0.90);
  --nav-bg-mob:  rgba(240,250,248,0.97);
  --nav-border:  rgba(27,120,120,0.15);
  --nav-text:    rgba(10,31,31,0.40);
  --nav-active:  #1B7878;
  /* More menu */
  --more-bg:     #F0FAF8;
  /* Misc */
  --white: #0A1F1F;
  --input-bg:     rgba(27,120,120,0.06);
  --input-border: rgba(27,120,120,0.20);
}

/* ─── PORTRAIT LOCK — landscape overlay ──────────────────────────────────── */
/* Shown on phones when rotated to landscape. Hidden on proper tablets (>600px
   short side) where landscape is intentional. The #app content stays mounted
   so no state is lost — we just cover it. */
#vyve-rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg2, #0D2B2B);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
}
#vyve-rotate-overlay svg {
  color: var(--teal-lt, #4DAAAA);
  animation: vyve-rotate-hint 2s ease-in-out infinite;
}
@keyframes vyve-rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  40%       { transform: rotate(-90deg); }
  60%       { transform: rotate(-90deg); }
}
#vyve-rotate-overlay p {
  color: var(--text, #fff);
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  opacity: 0.85;
}
/* Show overlay only on phone-sized landscape (short side ≤ 430px) */
@media (orientation: landscape) and (max-height: 430px) {
  #vyve-rotate-overlay { display: flex; }
}