/* Theme Name: My AI Theme | Author: Me | Version: 1.0 */

/* ==========================================================================
   Google Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   CSS Custom Properties (from Lovable index.css)
   ========================================================================== */
:root {
  --background: 150 20% 97%;
  --foreground: 160 25% 12%;
  --card: 0 0% 100%;
  --card-foreground: 160 25% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 160 25% 12%;
  --primary: 152 45% 28%;
  --primary-foreground: 150 20% 97%;
  --secondary: 145 20% 90%;
  --secondary-foreground: 152 45% 22%;
  --muted: 150 15% 93%;
  --muted-foreground: 160 10% 45%;
  --accent: 36 60% 55%;
  --accent-foreground: 36 70% 15%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 150 15% 88%;
  --input: 150 15% 88%;
  --ring: 152 45% 28%;
  --radius: 0.625rem;
  --hero-overlay: linear-gradient(
    135deg,
    hsla(160, 30%, 6%, 0.85) 0%,
    hsla(152, 45%, 15%, 0.6) 50%,
    hsla(36, 60%, 30%, 0.4) 100%
  );
  --glow-primary: 0 0 60px -10px hsla(152, 45%, 28%, 0.3);
  --glow-accent: 0 0 60px -10px hsla(36, 60%, 55%, 0.3);
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
}

.dark {
  --background: 160 25% 8%;
  --foreground: 150 20% 95%;
  --card: 160 20% 12%;
  --card-foreground: 150 20% 95%;
  --primary: 152 45% 45%;
  --primary-foreground: 160 25% 8%;
  --secondary: 155 20% 18%;
  --secondary-foreground: 150 20% 90%;
  --muted: 155 15% 16%;
  --muted-foreground: 150 10% 55%;
  --accent: 36 55% 50%;
  --accent-foreground: 36 70% 95%;
  --border: 155 15% 20%;
  --input: 155 15% 20%;
  --ring: 152 45% 45%;
}

/* ==========================================================================
   Base (Tailwind-like tokens used by theme)
   ========================================================================== */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

::selection {
  background: hsl(152, 45%, 28%);
  color: hsl(150, 20%, 97%);
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Custom utility classes (from Lovable index.css)
   ========================================================================== */
.hero-overlay {
  background: var(--hero-overlay);
}

.glow-primary {
  box-shadow: var(--glow-primary);
}

.glow-accent {
  box-shadow: var(--glow-accent);
}

.text-gradient {
  background: linear-gradient(135deg, hsl(152, 45%, 35%), hsl(36, 60%, 55%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-noise {
  position: relative;
}

.bg-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.line-decoration {
  position: relative;
}

.line-decoration::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 1rem;
  background: linear-gradient(90deg, hsl(152, 45%, 28%), hsl(36, 60%, 55%));
  border-radius: 999px;
}

.line-decoration-center::after {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Theme component overrides (ensure same look when Tailwind CDN is used)
   ========================================================================== */
.crystalpath-nav.scrolled {
  background: hsl(var(--card) / 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-bottom: 1px solid hsl(var(--border));
}

.crystalpath-nav.scrolled .nav-brand-crystal {
  color: hsl(var(--primary));
}

.crystalpath-nav:not(.scrolled) .nav-brand-crystal {
  color: hsl(var(--primary-foreground));
}

.crystalpath-nav.scrolled .nav-link {
  color: hsl(var(--muted-foreground));
}
.crystalpath-nav.scrolled .nav-link:hover {
  color: hsl(var(--primary));
  background-color: hsl(var(--secondary));
}
.crystalpath-nav.scrolled #crystalpath-menu-toggle {
  color: hsl(var(--foreground));
}

.crystalpath-mobile-menu {
  display: none;
}

.crystalpath-mobile-menu.is-open {
  display: block;
}

/* Hero scroll indicator animation */
@keyframes crystalpath-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.hero-scroll-indicator svg {
  animation: crystalpath-bounce 2s ease-in-out infinite;
}