/* ==================== LIGHT THEME ==================== */
/* Indian-inspired light theme with warm, welcoming colors */

:root {
  /* Primary Colors - Indian Flag Inspired */
  --primary-maroon: #8B0000;      /* Deep maroon red */
  --secondary-gold: #c5a14b;
  --saffron: #FF9933;             /* Vibrant saffron orange */
  --gold: #FFD700;                /* Rich gold */
  --peacock-blue: #005F73;        /* Deep teal blue */
  --peacock-green: #0A9396;       /* Complementary teal */

  /* Supporting Colors */
  --cream: #FFF8DC;               /* Warm cream */
  --cream-dark: #eddebe;         /* Slightly darker than cream */
  --sandalwood: #F5E6D3;          /* Light sandalwood */
  --deep-purple: #4A148C;         /* Deep purple */
  --rose-gold: #B76E79;           /* Rose gold/pink */
  --text-dark: #2C1810;           /* Dark brown text */
  --border-gold: #D4AF37;         /* Darker gold for borders */

  /* Background Colors */
  --bg-primary: #FFF8DC;          /* Main cream background */
  --bg-secondary: #F5E6D3;        /* Secondary sandalwood */
  --bg-card: #FFFFFF;             /* White cards */
  --bg-overlay: rgba(255, 248, 220, 0.95); /* Light overlay */

  /* Text Colors - Improved for better readability and consistency */
  --text-primary: #1A1A1A;        /* Rich dark charcoal for main text */
  --text-secondary: #0F766E;      /* Sophisticated teal for secondary text */
  --text-muted: #6B7280;          /* Balanced gray for muted text */
  --text-white: #FFFFFF;          /* Pure white text */

  /* Interactive Colors */
  --hover-primary: #A52A2A;       /* Hover maroon */
  --hover-secondary: #FFAD33;     /* Hover saffron */
  --focus-ring: #FFD700;          /* Focus ring color */

  /* Shadows & Effects */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Typography */
  --font-sans: 'Poppins', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Spacing Scale */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */

  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;  /* Fully rounded */

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;

    /* Component-specific theme variables */
    --header-bg: linear-gradient(135deg, var(--primary-maroon), var(--saffron));
    --card-bg: var(--bg-card);
    --button-primary: var(--primary-maroon);
    --button-secondary: var(--saffron);
    --input-bg: var(--bg-card);
    --input-border: var(--peacock-blue);
}

/* Section Title - Advanced Liquid Glass 3D Effect */
.section-title {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0.5em auto 1em;
    font-size: 1.8em; /* Reduced from 3em */
    font-weight: 700; /* Slightly reduced from 900 */
    text-align: center;
    letter-spacing: 2px; /* Reduced from 4px */
    padding: 0.5em 1em; /* Reduced padding */
    border-bottom: 2px solid var(--saffron);
  text-transform: uppercase;

  /* Theme-based gradient using CSS variables */
  background: linear-gradient(
    145deg,
    var(--primary-maroon) 0%,
    var(--saffron) 25%,
    var(--gold) 50%,
    var(--secondary-gold) 75%,
    var(--peacock-blue) 100%
  );

  /* Text styling */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  color: var(--primary-maroon) !important;
  -webkit-text-fill-color: var(--primary-maroon) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 0 rgba(255, 255, 255, 0.3),
    0 3px 0 rgba(255, 255, 255, 0.2),
    0 4px 0 rgba(255, 255, 255, 0.1);

  /* 3D perspective */
  transform:  rotateX(5deg) rotateY(-5deg);
  transform-origin: center center;

  /* Glass effect */
    border-radius: 20px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  /* Glass reflection */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 8px 25px rgba(0, 0, 0, 0.15);

  transition: all 0.4s ease;
}

/* Dark theme adjustments */
[data-theme="dark"] .section-title {
    background: linear-gradient(
            145deg,
            #ffd700 0%,  /* Brighter gold */
            #ffb700 100%  /* Brighter orange-gold */
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: #ffd700; /* Brighter gold fallback */
    -webkit-text-fill-color: transparent;
    color: #ffd700 !important;
    -webkit-text-fill-color: #ffd700 !important;
    text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.6),
            0 2px 4px rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid #ffb700; /* Brighter border */
    font-weight: 600;
}

[data-theme="dark"] .section-title:hover {
    background: linear-gradient(
            145deg,
            #fff8e1 0%,      /* Very light gold */
            #ffd700 50%,     /* Bright gold */
            #ffb700 100%     /* Bright orange-gold */
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffd700 !important;
    text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.7),
            0 2px 4px rgba(0, 0, 0, 0.5);
    transform: none;
    filter: none;
}
/* Liquid floating animation */
@keyframes liquidFloat {
  0%, 100% {
    transform: perspective(500px) rotateX(15deg) rotateY(-5deg) translateY(0px);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: perspective(500px) rotateX(12deg) rotateY(-3deg) translateY(-2px);
    filter: hue-rotate(5deg);
  }
  50% {
    transform: perspective(500px) rotateX(18deg) rotateY(-7deg) translateY(-1px);
    filter: hue-rotate(-5deg);
  }
  75% {
    transform: perspective(500px) rotateX(14deg) rotateY(-4deg) translateY(-3px);
    filter: hue-rotate(3deg);
  }
}

.section-title:hover {
  transform: perspective(500px) rotateX(10deg) rotateY(-2deg) scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 12px 35px rgba(0, 0, 0, 0.25);
  animation-duration: 2s;
  filter: brightness(1.1) contrast(1.1);
    animation: liquidFloat 2s ease-in-out infinite;
}

/* Add a subtle inner glow */
.section-title::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  border-radius: 15px;
  z-index: -1;
  opacity: 0.7;
}

/* Add this to your light-theme.css */
@media (max-width: 768px) {
    .section-title {
        font-size: 2em;
        padding: 0.6em 1em;
        letter-spacing: 2px;
    }
}

/* Ensure proper spacing for section containers */
.portfolio-section,
.family-details-section,
.hobbies-interests-section,
.partner-preferences-section,
.personal-details-section,
.contact-section,
.education-profession-section {
    position: relative;
    padding: 2em 0;
    overflow: hidden;
}

/* Add a subtle background to sections for better contrast */
[data-theme="light"] .portfolio-section,
[data-theme="light"] .family-details-section,
[data-theme="light"] .hobbies-interests-section,
[data-theme="light"] .partner-preferences-section,
[data-theme="light"] .personal-details-section,
[data-theme="light"] .contact-section,
[data-theme="light"] .education-profession-section {
    background: rgba(255, 248, 220, 0.3); /* Light cream background in light mode */
}

[data-theme="dark"] .portfolio-section,
[data-theme="dark"] .family-details-section,
[data-theme="dark"] .hobbies-interests-section,
[data-theme="dark"] .partner-preferences-section,
[data-theme="dark"] .personal-details-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .education-profession-section {
    background: rgba(0, 0, 0, 0.1); /* Subtle dark background in dark mode */
}