:root {
  /* Playful Color Palette */
  --pf-violet: #8b5cf6;
  --pf-rose: #f43f5e;
  --pf-cream: #fffdf5;
  --pf-cream-darker: #fefce8;

  /* Bootstrap Variable Overrides */
  --bs-primary: var(--pf-violet);
  --bs-primary-rgb: 139, 92, 246;
  --bs-secondary: var(--pf-rose);
  --bs-secondary-rgb: 244, 63, 94;
  --bs-body-bg: var(--pf-cream);
  --bs-body-color: #4b5563; /* Softer dark text */
  --bs-font-sans-serif: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  --bs-border-radius: 1rem;
  --bs-border-radius-lg: 2rem;
  --bs-border-radius-xl: 2.5rem;
}

body {
  background-color: var(--pf-cream);
  font-family: var(--bs-font-sans-serif);
  /* Organic background blobs using multiple background images could be added here, 
     but keeping it simple with just color initially as requested. 
     Will add pseudo-elements for blobs if needed for "organic floating blob background shapes". */
  overflow-x: hidden;
  padding-top: 100px; /* Prevent content from being hidden behind fixed header */
}

section, .section, div[id] {
    scroll-margin-top: 100px;
}

/* Override bootstrap backgrounds to fit theme */
.bg-light {
    background-color: var(--pf-cream-darker) !important;
}

/* Ensure bg-white is compatible with rounded corners and theme, 
   but strictly for cards/containers, not full width sections ideally. 
   We will make full-width sections transparent if possible via specific overrides or 
   just accept white blocks for now but round them. */
section.bg-white {
    background-color: rgba(255, 255, 255, 0.5) !important; /* Semi-transparent for sections to show blobs */
    backdrop-filter: blur(10px);
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  color: var(--pf-violet); /* Headers in Violet for contrast/playfulness */
}

/* Typography Updates */
.fw-light {
    font-weight: 400 !important; /* Fredoka light is pretty thin, bumping up readability */
}

/* UI Elements: Pill Buttons */
.btn {
  border-radius: 50rem; /* Pill shape */
  padding-left: 2rem;
  padding-right: 2rem;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy spring */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn:hover {
  transform: scale(1.05) rotate(-2deg); /* Scale and slight tilt */
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.3), 0 4px 6px -2px rgba(139, 92, 246, 0.1);
}

.btn-primary {
  background-color: var(--pf-violet);
  border-color: var(--pf-violet);
}

.btn-primary:hover {
    background-color: #7c3aed;
    border-color: #7c3aed;
}

.btn-outline-dark {
    border-width: 2px;
    color: var(--pf-violet);
    border-color: var(--pf-violet);
}
.btn-outline-dark:hover {
    background-color: var(--pf-violet);
    border-color: var(--pf-violet);
    color: white;
}


/* UI Elements: Rounded Cards */
.card, .bg-white {
  border-radius: 32px !important;
  border: none;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

/* Organic Blobs - Decoration */
/* Organic Blobs - Decoration removed */

/* Specific text gradient override */
.text-gradient {
  background: -webkit-linear-gradient(315deg, var(--pf-violet) 0%, var(--pf-rose) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Profile Image Decoration */
.profile {
    border-radius: 32px; /* Slightly squircle */
    position: relative;
    background: linear-gradient(45deg, var(--pf-violet), var(--pf-rose));
    padding: 6px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.profile-img {
    border-radius: 28px; /* Inner radius matching padding */
}

/* Badges */
.badge {
    border-radius: 50rem;
    padding: 0.8em 1.2em;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.bg-gradient-primary-to-secondary {
    background: linear-gradient(45deg, var(--pf-violet), var(--pf-rose)) !important;
}

/* Scroll Aware Opacity defaults (can be refined in component logic if needed, but simple CSS sticky help) */
.sticky-top {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}