/* ============================================================
   THEMES.CSS — Edit this file to change the site's color palette
   ============================================================ */

/* ── Active theme: Pink Bloom (default) ───────────────────── */
:root {
  /* Page background gradient — matches the pastel sky image */
  --bg-gradient-start:   #c0b6ee;
  --bg-gradient-mid:     #f8ceb6;
  --bg-gradient-end:     #ecacca;

  /* Surface / panel colors */
  --bg-card:             rgba(255, 255, 255, 0.88);
  --bg-card-hover:       rgba(255, 255, 255, 0.96);
  --bg-section-light:    rgba(255, 255, 255, 0.60);
  --bg-section-purple:   rgba(212, 170, 255, 0.35);
  --bg-nav:              rgba(255, 220, 240, 0.80);

  /* Accent colors */
  --accent-primary:      #e066aa;
  --accent-hover:        #c4508f;
  --accent-soft:         #ffe0f0;
  --accent-purple:       #b97fe8;
  --accent-purple-soft:  #efe0ff;
  --accent-yellow:       #ffd966;

  /* Text */
  --text-heading:        #3d1a5c;
  --text-body:           #5c3478;
  --text-muted:          #9b72bf;
  --text-on-accent:      #ffffff;

  /* Borders & shadows */
  --border:              rgba(185, 127, 232, 0.25);
  --shadow-sm:           0 2px 12px rgba(180, 100, 220, 0.12);
  --shadow-md:           0 6px 28px rgba(180, 100, 220, 0.18);
  --shadow-lg:           0 14px 48px rgba(180, 100, 220, 0.25);

  /* Decoration colors (butterflies, flowers) */
  --deco-pink:           #ffb3d9;
  --deco-purple:         #d4aaff;
  --deco-lilac:          #c8b8ff;
  --deco-yellow:         #ffe599;
  --deco-white:          #fff5fc;

  /* Radius */
  --radius-sm:           10px;
  --radius-md:           18px;
  --radius-lg:           28px;
  --radius-xl:           40px;
  --radius-pill:         9999px;
}


/* ── Theme: Midnight Garden ───────────────────────────────── */
/* Deep navy → purple. Uncomment & rename to :root to use.    */
/*
.theme-midnight {
  --bg-gradient-start:   #1a0a3d;
  --bg-gradient-mid:     #2d1060;
  --bg-gradient-end:     #0d1a4a;

  --bg-card:             rgba(30, 15, 60, 0.88);
  --bg-card-hover:       rgba(40, 20, 75, 0.96);
  --bg-section-light:    rgba(30, 15, 60, 0.60);
  --bg-section-purple:   rgba(80, 40, 140, 0.40);
  --bg-nav:              rgba(20, 8, 45, 0.90);

  --accent-primary:      #c084fc;
  --accent-hover:        #a855f7;
  --accent-soft:         #2d1060;
  --accent-purple:       #818cf8;
  --accent-purple-soft:  #1e1b4b;
  --accent-yellow:       #fde68a;

  --text-heading:        #f5e8ff;
  --text-body:           #d8b4fe;
  --text-muted:          #7c6aaa;
  --text-on-accent:      #1a0a3d;

  --border:              rgba(192, 132, 252, 0.20);
  --shadow-sm:           0 2px 12px rgba(192, 132, 252, 0.15);
  --shadow-md:           0 6px 28px rgba(192, 132, 252, 0.22);
  --shadow-lg:           0 14px 48px rgba(192, 132, 252, 0.30);

  --deco-pink:           #c084fc;
  --deco-purple:         #818cf8;
  --deco-lilac:          #a5b4fc;
  --deco-yellow:         #fde68a;
  --deco-white:          #f5e8ff;
}
*/


/* ── Theme: Cotton Candy ──────────────────────────────────── */
/* All-pink, very soft. Uncomment & rename to :root to use.   */
/*
.theme-cotton-candy {
  --bg-gradient-start:   #ffc2e0;
  --bg-gradient-mid:     #ffaad5;
  --bg-gradient-end:     #ffd6ec;

  --bg-card:             rgba(255, 255, 255, 0.90);
  --bg-card-hover:       #ffffff;
  --bg-section-light:    rgba(255, 245, 252, 0.70);
  --bg-section-purple:   rgba(255, 200, 230, 0.45);
  --bg-nav:              rgba(255, 235, 248, 0.85);

  --accent-primary:      #e0559a;
  --accent-hover:        #c43d82;
  --accent-soft:         #ffe8f4;
  --accent-purple:       #e08080;
  --accent-purple-soft:  #ffe0e0;
  --accent-yellow:       #ffda6e;

  --text-heading:        #5a0a30;
  --text-body:           #7a2248;
  --text-muted:          #c0749a;
  --text-on-accent:      #ffffff;

  --border:              rgba(224, 85, 154, 0.20);
  --shadow-sm:           0 2px 12px rgba(224, 85, 154, 0.12);
  --shadow-md:           0 6px 28px rgba(224, 85, 154, 0.18);
  --shadow-lg:           0 14px 48px rgba(224, 85, 154, 0.24);

  --deco-pink:           #ffaacc;
  --deco-purple:         #ffbbdd;
  --deco-lilac:          #ffd0e8;
  --deco-yellow:         #ffe599;
  --deco-white:          #fffafc;
}
*/


/* ── Theme: Fairy Forest ──────────────────────────────────── */
/* Mint green → soft purple. Rename to :root to use.          */
/*
.theme-fairy-forest {
  --bg-gradient-start:   #b8f0d8;
  --bg-gradient-mid:     #c8e8ff;
  --bg-gradient-end:     #d4c8ff;

  --bg-card:             rgba(255, 255, 255, 0.88);
  --bg-card-hover:       #ffffff;
  --bg-section-light:    rgba(240, 255, 248, 0.65);
  --bg-section-purple:   rgba(200, 232, 255, 0.45);
  --bg-nav:              rgba(220, 248, 236, 0.85);

  --accent-primary:      #3cb88a;
  --accent-hover:        #2a9a72;
  --accent-soft:         #d0f5e8;
  --accent-purple:       #7a9ae0;
  --accent-purple-soft:  #dce8ff;
  --accent-yellow:       #ffe08a;

  --text-heading:        #0a3d28;
  --text-body:           #1e5a40;
  --text-muted:          #5a9a78;
  --text-on-accent:      #ffffff;

  --border:              rgba(60, 184, 138, 0.20);
  --shadow-sm:           0 2px 12px rgba(60, 184, 138, 0.12);
  --shadow-md:           0 6px 28px rgba(60, 184, 138, 0.18);
  --shadow-lg:           0 14px 48px rgba(60, 184, 138, 0.24);

  --deco-pink:           #a0e8c8;
  --deco-purple:         #b8d8ff;
  --deco-lilac:          #c8c0ff;
  --deco-yellow:         #ffe0a0;
  --deco-white:          #f5fff9;
}
*/