/* Lovable-inspired theme — light (default) */
:root {
  --lov-purple: #8b5cf6;
  --lov-lilac: #a78bfa;
  --lov-pink: #ff6b9d;
  --lov-magenta: #ec4899;
  --lov-blue: #6366f1;
  --lov-orange: #f97316;
  --lov-ink: #0a0a0a;
  --lov-parchment: #fcfbf8;
  --lov-blossom: #ffe5ee;

  --lov-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 28%, #ec4899 62%, #ff6b9d 100%);
  --lov-grad-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(236, 72, 153, 0.12));
  --lov-grad-text: linear-gradient(135deg, #7c3aed 0%, #db2777 45%, #ff6b9d 100%);
  --lov-glow: rgba(236, 72, 153, 0.32);
  --lov-glow-purple: rgba(139, 92, 246, 0.28);

  --lp-bg: #f7f4ef;
  --lp-bg-2: #fcfbf8;
  --lp-surface: #ffffff;
  --lp-surface-2: #f3f0ea;
  --lp-text: #1c1c1c;
  --lp-text-soft: #5f5f5d;
  --lp-muted: #787876;
  --lp-border: rgba(28, 28, 28, 0.1);
  --lp-brand: #ec4899;
  --lp-brand-2: #8b5cf6;
  --lp-brand-soft: #ffe5ee;
  --lp-hero-grad: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(167, 139, 250, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 20%, rgba(255, 107, 157, 0.14), transparent 50%),
    radial-gradient(ellipse 50% 40% at 10% 30%, rgba(99, 102, 241, 0.12), transparent 50%),
    #f7f4ef;
  --lp-nav-bg: rgba(252, 251, 248, 0.82);
  --lp-shadow: 0 24px 60px rgba(28, 28, 28, 0.08);
  --lp-card-glow: 0 0 0 1px rgba(28, 28, 28, 0.05);
  --lp-code-bg: #1c1c1c;
  --lp-code-text: #f5f5f4;
  --lp-mesh-opacity: 0.55;
  --lp-online: #22c55e;
}

html[data-theme="dark"] {
  --lp-bg: #07070a;
  --lp-bg-2: #0f0f14;
  --lp-surface: #13131a;
  --lp-surface-2: #1a1a24;
  --lp-text: #fafafa;
  --lp-text-soft: #c4c4cc;
  --lp-muted: #8b8b96;
  --lp-border: rgba(255, 255, 255, 0.08);
  --lp-brand: #ff6b9d;
  --lp-brand-2: #a78bfa;
  --lp-brand-soft: rgba(236, 72, 153, 0.12);
  --lp-hero-grad: radial-gradient(ellipse 70% 55% at 50% -5%, rgba(139, 92, 246, 0.28), transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(255, 107, 157, 0.16), transparent 50%),
    radial-gradient(ellipse 45% 40% at 15% 25%, rgba(99, 102, 241, 0.14), transparent 50%),
    #07070a;
  --lp-nav-bg: rgba(7, 7, 10, 0.78);
  --lp-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  --lp-card-glow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --lp-code-bg: #050508;
  --lp-code-text: #e4e4e7;
  --lov-grad-text: linear-gradient(135deg, #a78bfa 0%, #f472b6 40%, #ff6b9d 100%);
  --lov-glow: rgba(255, 107, 157, 0.38);
  --lov-glow-purple: rgba(167, 139, 250, 0.35);
  --lp-mesh-opacity: 1;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--lp-border);
  background: var(--lp-surface);
  color: var(--lp-text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}
.theme-toggle:hover {
  border-color: var(--lov-magenta);
  color: var(--lov-magenta);
}
.theme-toggle i { font-size: 0.9rem; }

.grad-text {
  background: var(--lov-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}