/* ============================================================
   FusionHost — LIGHT THEME STYLESHEET (light.css)
   Contains: Light Mode Design Tokens, Surfaces & Overrides
   Version: 1.0.0
   ============================================================ */

/* ── 1. LIGHT THEME DESIGN TOKENS ───────────────────────────── */
:root {
  --color-primary:      #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-accent:       #06B6D4;
  --color-dark-bg:      #090D16;
  --color-dark-surface: #0F172A;
  --color-light-bg:     #F8FAFC;
  --color-border:       #E2E8F0;
  --color-pill-bg:      #E0F2FE;
  --color-pill-text:    #0284C7;
}

/* ── 2. BODY & BASE SURFACES ────────────────────────────────── */
body {
  background-color: var(--color-light-bg);
  color: #1E293B;
}

/* ── 3. SCROLLBAR & SELECTION ────────────────────────────────── */
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: var(--color-primary); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }
::selection { background-color: #BFDBFE; color: #1E293B; }

/* ── 4. GLASSMORPHIC UTILITIES ───────────────────────────────── */
.glass       { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); }
.glass-dark  { background: rgba(15, 23, 42, 0.7);     backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.06); }
.glass-light { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(226, 232, 240, 0.8); }

/* ── 5. GRADIENT UTILITIES ───────────────────────────────────── */
.gradient-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); }
.gradient-primary-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-dark-bg { background: linear-gradient(180deg, #090D16 0%, #0F172A 100%); }

/* ── 6. HERO GLOWS ───────────────────────────────────────────── */
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.hero-glow--blue { width: 600px; height: 600px; background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, transparent 70%); top: -100px; right: -100px; }
.hero-glow--cyan { width: 400px; height: 400px; background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, transparent 70%); bottom: 0; left: -50px; }

/* ── 7. HEADER & STICKY BARS ─────────────────────────────────── */
.header-scrolled {
  box-shadow: 0 1px 20px rgba(15, 23, 42, 0.05);
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.sticky-cta {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #E2E8F0;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}

/* ── 8. MARQUEE BAND LIGHT ───────────────────────────────────── */
.marquee-band {
  background: linear-gradient(180deg, #F1F5F9 0%, #F8FAFC 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.marquee-fade-left  { background: linear-gradient(to right, #F8FAFC, transparent); }
.marquee-fade-right { background: linear-gradient(to left,  #F8FAFC, transparent); }

/* ── 9. PRICING & CARDS ──────────────────────────────────────── */
.pricing-card-recommended { border: 2px solid var(--color-primary); position: relative; }
.pricing-card-recommended::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(6, 182, 212, 0.04) 100%);
  pointer-events: none;
}
.dark-card-glow { box-shadow: 0 0 40px rgba(37, 99, 235, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.05); }

/* ── 10. COMPONENTS & CONTROLS ───────────────────────────────── */
.global-pill {
  color: #0F172A;
  border: 1px solid rgba(191, 219, 254, 0.85);
  background: linear-gradient(90deg, #FFFFFF 0%, #D8EBFF 100%);
  box-shadow: -5px 0px 0px -2px var(--color-primary-dark);
}
.tech-card {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
.tld-pill.is-active {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.currency-option.is-active,
.rs-opt.is-active {
  background-color: #EBF3FF;
  color: #2563EB;
  font-weight: 700;
}
.rs-menu {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.15);
}
.rs-opt { color: #475569; }
.rs-opt:hover { background: #F1F5F9; color: #0F172A; }

.ttip { color: #94A3B8; }
.ttip:hover, .ttip:focus-visible { color: #2563EB; }
.ttip .tip-box {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.35);
}
.ttip .tip-box::after { border-top-color: #0F172A; }

.bar-track { background: #E2E8F0; }
.metric-bar { background: #E2E8F0; }

/* ── 11. AMBIENT CURSOR SPOTLIGHT (LIGHT GLOW) ───────────────── */
.ambient-spotlight {
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.11) 0%,
    rgba(6, 182, 212, 0.045) 42%,
    transparent 70%
  );
  mix-blend-mode: normal;
}