/* ============================================================
   Lumière Studio — Unfold Admin Custom Theme
   Crimson Noir (Dark) & Crimson Pearl (Light)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&family=Cairo:wght@300;400;500;600;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&display=swap');

:root {
  /* ── Brand Crimson ── */
  --crimson:        #B01A3C;
  --crimson-vivid:  #D42050;
  --crimson-soft:   #8B1530;
  --crimson-glow:   rgba(176, 26, 60, 0.45);
  --crimson-dim:    rgba(176, 26, 60, 0.12);
  --crimson-ultra:  rgba(176, 26, 60, 0.06);

  /* ── Brand Navy ── */
  --navy:           #1C3A5E;
  --navy-light:     #2A5480;

  /* ── Glass Layers (Dark) ── */
  --glass-1:        rgba(13, 8, 24, 0.55);
  --glass-2:        rgba(7, 5, 15, 0.72);
  --glass-3:        rgba(3, 2, 8, 0.88);
}

/* Base mesh bg for light mode (Pearl) */
.mesh-bg {
  position: fixed;
  inset: 0;
  background-color: rgb(244, 237, 232); /* Pearl Base */
  background-image:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(176, 26, 60, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% 80%, rgba(28, 58, 94, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 60% 30%, rgba(176, 26, 60, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 10% 70%, rgba(200, 169, 106, 0.03) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}

/* Mesh bg for dark mode (Crimson Noir) */
html.dark .mesh-bg {
  background-color: rgb(3, 2, 8); /* --bg-void */
  background-image:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(176, 26, 60, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% 80%, rgba(28, 58, 94, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 60% 30%, rgba(176, 26, 60, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 10% 70%, rgba(200, 169, 106, 0.05) 0%, transparent 50%);
}

/* Glass panel */
.glass-2 {
  background: rgba(248, 244, 240, 0.85);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(176, 26, 60, 0.1);
  border-radius: 1.5rem !important;
  box-shadow:
    0 8px 32px rgba(196, 172, 152, 0.3),
    0 0 0 0.5px rgba(255, 255, 255, 0.5) inset;
}

html.dark .glass-2 {
  background: var(--glass-2);
  border: 1px solid rgba(176, 26, 60, 0.18);
  box-shadow:
    0 8px 32px rgba(3, 2, 8, 0.6),
    0 0 0 0.5px rgba(244, 237, 232, 0.06) inset,
    0 1px 0 rgba(244, 237, 232, 0.06) inset;
}

/* Override unfold default login container styling */
.login-container-override {
    position: relative;
    z-index: 10;
    max-width: 28rem;
    margin: auto;
    width: 100%;
}

/* Custom typography for LiVE header */
.live-login-title {
    font-family: 'Cormorant Garamond', 'Tajawal', serif;
    font-size: 3rem;
    font-weight: 600;
    background: linear-gradient(120deg, #F4EDE8 20%, #E8D4A0 40%, #D42050 55%, #E8D4A0 70%, #F4EDE8 80%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* Form input enhancements to match glass */
.glass-2 input {
    background-color: rgba(13, 8, 24, 0.4) !important;
    border-color: rgba(244, 237, 232, 0.1) !important;
}
html:not(.dark) .glass-2 input {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(176, 26, 60, 0.1) !important;
}
.glass-2 input:focus {
    border-color: var(--crimson) !important;
    box-shadow: 0 0 0 2px var(--crimson-dim) !important;
}

/* Custom Button Gradient */
.btn-primary-gradient {
    background: linear-gradient(to right, #140209, #B01A3C) !important;
    border: none !important;
    color: #F4EDE8 !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}
.btn-primary-gradient:hover {
    background: linear-gradient(to right, #B01A3C, #D42050) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(176, 26, 60, 0.4) !important;
}
html:not(.dark) .btn-primary-gradient {
    background: linear-gradient(to right, #B01A3C, #8B1530) !important;
}
html:not(.dark) .btn-primary-gradient:hover {
    background: linear-gradient(to right, #D42050, #B01A3C) !important;
}