/* ============================================================
   THEME: PETAL
   Soft, airy, romantic — lavender and blush on white cloud
   Gentle curves, whisper shadows, nothing harsh
   ============================================================ */

   [data-theme="petal"] {
    /* ── Core palette ──────────────────────────────────────── */
    --color-bg:             #fdf8ff;
    --color-surface:        #f5effe;
    --color-surface-2:      #ede0fc;
    --color-border:         #e8d9f8;
    --color-border-light:   #f0e6fb;
  
    /* ── Brand / Accent ────────────────────────────────────── */
    --color-primary:        #9b5de5;
    --color-primary-hover:  #7c3acd;
    --color-accent:         #f72585;
    --color-accent-soft:    rgba(247, 37, 133, 0.1);
    --color-primary-soft:   rgba(155, 93, 229, 0.1);
  
    /* ── Text ──────────────────────────────────────────────── */
    --color-heading:        #2d1b4e;
    --color-text:           #4a3568;
    --color-text-muted:     #9b85b8;
    --color-btn-text:       #ffffff;
  
    /* ── Shadows ───────────────────────────────────────────── */
    --color-shadow:         rgba(155, 93, 229, 0.22);
    --color-card-shadow:    0 4px 24px rgba(155, 93, 229, 0.08);
    --color-glow:           0 0 0 transparent;
  
    /* ── Typography ────────────────────────────────────────── */
    --font-heading:         'Cormorant Garamond', serif;
    --font-body:            'Nunito', sans-serif;
  
    /* ── Shape — very round, soft ──────────────────────────── */
    --radius-sm:            8px;
    --radius-md:            14px;
    --radius-lg:            22px;
    --radius-xl:            32px;
  
    /* ── Nav specific ──────────────────────────────────────── */
    --nav-bg:               rgba(253, 248, 255, 0.92);
    --nav-border:           rgba(232, 217, 248, 0.8);
  
    /* ── Hero specific ─────────────────────────────────────── */
    --hero-bg:              #fdf8ff;
    --hero-gradient:        radial-gradient(ellipse 80% 60% at 30% 0%, rgba(247,37,133,0.07) 0%, transparent 60%),
                            radial-gradient(ellipse 60% 50% at 90% 80%, rgba(155,93,229,0.09) 0%, transparent 60%);
  
    /* ── Feature card ──────────────────────────────────────── */
    --card-bg:              #ffffff;
    --card-border:          #e8d9f8;
    --card-hover-border:    #9b5de5;
  
    /* ── CTA section ───────────────────────────────────────── */
    --cta-bg:               #f5effe;
    --cta-gradient:         linear-gradient(135deg, rgba(247,37,133,0.05) 0%, rgba(155,93,229,0.06) 100%);
  
    /* ── Footer ────────────────────────────────────────────── */
    --footer-bg:            #2d1b4e;
    --footer-text:          #9b85b8;
  }
  
  /* ── Petal-specific overrides ──────────────────────────── */
  
  /* Extra rounded nav */
  [data-theme="petal"] .site-header {
    border-bottom-color: var(--color-border);
  }
  
  /* Hero badge — pill with blush tint */
  [data-theme="petal"] .hero-badge {
    background-color: rgba(247, 37, 133, 0.08);
    border-color: rgba(247, 37, 133, 0.3);
    color: var(--color-accent);
  }
  
  [data-theme="petal"] .hero-badge-dot {
    background-color: var(--color-accent);
  }
  
  /* Buttons — soft shadow, very round */
  [data-theme="petal"] .btn-primary {
    background: linear-gradient(135deg, #9b5de5, #f72585);
    border-color: transparent;
    box-shadow: 0 4px 18px rgba(155, 93, 229, 0.3);
  }
  
  [data-theme="petal"] .btn-primary:hover {
    background: linear-gradient(135deg, #7c3acd, #d91f72);
    box-shadow: 0 8px 28px rgba(155, 93, 229, 0.4);
  }
  
  /* Feature card — very round, petal shadow */
  [data-theme="petal"] .feature-card {
    box-shadow: 0 2px 16px rgba(155, 93, 229, 0.06);
  }
  
  [data-theme="petal"] .feature-card:hover {
    box-shadow: 0 8px 32px rgba(155, 93, 229, 0.14);
  }
  
  /* Feature card bottom bar — gradient */
  [data-theme="petal"] .feature-card::after {
    background: linear-gradient(90deg, #9b5de5, #f72585);
  }
  
  /* Feature icon hover — gradient bg */
  [data-theme="petal"] .feature-card:hover .feature-icon {
    background: linear-gradient(135deg, #9b5de5, #f72585);
  }
  
  /* Hero card gradient top line */
  [data-theme="petal"] .hero-card::before {
    background: linear-gradient(90deg, #f72585, #9b5de5);
  }
  
  /* Float badge — accent pink */
  [data-theme="petal"] .hero-float-badge {
    background: linear-gradient(135deg, #9b5de5, #f72585);
    box-shadow: 0 8px 24px rgba(247, 37, 133, 0.3);
  }
  
  /* CTA title gradient */
  [data-theme="petal"] .cta-title em {
    background: linear-gradient(90deg, #9b5de5, #f72585);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Hero em gradient */
  [data-theme="petal"] .hero-title em {
    background: linear-gradient(90deg, #9b5de5, #f72585);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Section label — accent */
  [data-theme="petal"] .section-label {
    color: var(--color-accent);
  }
  
  /* Footer — deep plum bg already in vars */
  [data-theme="petal"] .site-footer {
    border-top: none;
  }