/* =====================================================================
   THEMES — four complete emotional worlds expressed as CSS variables.
   The same markup + components adapt entirely through these tokens, so
   choosing a theme is like stepping into a different atmosphere.
   ===================================================================== */

/* ---------- THEME 1 · BACK TO LIFE (nostalgia / peace / healing) ----- */
[data-theme="back-to-life"] {
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', 'Segoe UI', system-ui, sans-serif;

  --c-1: #2F4F4F;   /* deep slate      */
  --c-2: #36454F;   /* charcoal        */
  --c-3: #FC89AC;   /* soft pink glow  */
  --c-4: #FFFFF0;   /* ivory text      */
  --c-5: #563C5C;   /* plum depth      */

  --bg-grad: radial-gradient(120% 120% at 20% 10%, #3b5353 0%, #2F4F4F 35%, #2a3a45 60%, #563C5C 100%);
  --bg-solid: #2F4F4F;

  --text:        #FFFFF0;
  --text-muted:  rgba(255,255,240,0.66);
  --text-faint:  rgba(255,255,240,0.4);

  --accent:        #FC89AC;
  --accent-2:      #563C5C;
  --accent-soft:   rgba(252,137,172,0.16);
  --accent-glow:   rgba(252,137,172,0.55);

  --card-bg:      rgba(255,255,240,0.05);
  --card-bg-2:    rgba(255,255,240,0.08);
  --card-border:  rgba(252,137,172,0.22);
  --card-shadow:  0 30px 80px -40px rgba(0,0,0,0.8);

  --field-bg:     rgba(255,255,240,0.06);
  --field-border: rgba(252,137,172,0.25);

  --glow-text: 0 0 28px rgba(252,137,172,0.45);
  --radius: 26px;
  --blur: 14px;

  --hero-title-size: clamp(3rem, 8vw, 6.5rem);
}

/* ---------- THEME 2 · BACK TO BIRTH (rebirth / nature / inner peace) - */
[data-theme="back-to-birth"] {
  --font-display: 'Spectral', Georgia, serif;
  --font-body:    'Quicksand', 'Segoe UI', system-ui, sans-serif;

  --c-1: #00A550;   /* living green    */
  --c-2: #E0FFFF;   /* light cyan air  */
  --c-3: #563C5C;   /* plum            */
  --c-4: #01796F;   /* pine            */
  --c-5: #808000;   /* olive           */
  --c-6: #FFFFF0;   /* ivory           */
  --c-7: #B56917;   /* warm earth      */

  --bg-grad: radial-gradient(130% 120% at 80% 0%, #d8fff4 0%, #E0FFFF 28%, #e9f7df 55%, #cdeede 100%);
  --bg-solid: #E0FFFF;

  --text:        #12352b;
  --text-muted:  rgba(18,53,43,0.66);
  --text-faint:  rgba(18,53,43,0.42);

  --accent:        #00A550;
  --accent-2:      #01796F;
  --accent-soft:   rgba(0,165,80,0.14);
  --accent-glow:   rgba(1,121,111,0.4);

  --card-bg:      rgba(255,255,255,0.55);
  --card-bg-2:    rgba(255,255,255,0.72);
  --card-border:  rgba(0,165,80,0.22);
  --card-shadow:  0 30px 70px -42px rgba(1,121,111,0.45);

  --field-bg:     rgba(255,255,255,0.6);
  --field-border: rgba(0,165,80,0.25);

  --glow-text: 0 0 26px rgba(0,165,80,0.3);
  --radius: 30px;
  --blur: 16px;

  --hero-title-size: clamp(2.8rem, 7.5vw, 6rem);
}

/* ---------- THEME 3 · CHILD INSIDE (joy / curiosity / wonder) -------- */
[data-theme="child-inside"] {
  --font-display: 'Baloo 2', 'Fredoka', 'Comic Sans MS', cursive;
  --font-body:    'Quicksand', 'Segoe UI', system-ui, sans-serif;

  --c-1:  #FB607F;  --c-2:  #ED9121;  --c-3:  #FF5800;
  --c-4:  #FDEE00;  --c-5:  #E4D96F;  --c-6:  #50C878;
  --c-7:  #76FF7A;  --c-8:  #0FFFFF;  --c-9:  #F0FFFF;
  --c-10: #00BFFF;  --c-11: #DA70D6;  --c-12: #F653A6;

  --bg-grad: linear-gradient(135deg, #FFF6D6 0%, #FFE3F0 35%, #E0F7FF 70%, #E6FFE0 100%);
  --bg-solid: #FFE9F3;

  --text:        #4a2b5a;
  --text-muted:  rgba(74,43,90,0.7);
  --text-faint:  rgba(74,43,90,0.45);

  --accent:        #FB607F;
  --accent-2:      #00BFFF;
  --accent-soft:   rgba(251,96,127,0.16);
  --accent-glow:   rgba(218,112,214,0.5);

  --card-bg:      rgba(255,255,255,0.62);
  --card-bg-2:    rgba(255,255,255,0.82);
  --card-border:  rgba(218,112,214,0.3);
  --card-shadow:  0 26px 60px -38px rgba(246,83,166,0.45);

  --field-bg:     rgba(255,255,255,0.7);
  --field-border: rgba(218,112,214,0.32);

  --glow-text: 0 0 22px rgba(0,191,255,0.35);
  --radius: 34px;
  --blur: 12px;

  --hero-title-size: clamp(3rem, 8.5vw, 6.8rem);
}

/* ---------- THEME 4 · BREAK (rest / comfort / gentle healing) -------- */
[data-theme="break"] {
  --font-display: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  --c-1:  #F2F3F4;  --c-2:  #FAEBD7;  --c-3:  #FFF8DC;
  --c-4:  #FFFAF0;  --c-5:  #F8F8FF;  --c-6:  #F4F0EC;
  --c-7:  #E9FFDB;  --c-8:  #F1E9D2;  --c-9:  #E5E4E2;
  --c-10: #F5F5F5;  --c-11: #DBD7D2;  --c-12: #C0C0C0;
  --c-13: #BEBFC5;  --c-14: #91A3B0;  --c-15: #8C92AC;

  --bg-grad: radial-gradient(120% 120% at 30% 20%, #FFFAF0 0%, #F8F8FF 40%, #F4F0EC 70%, #E5E4E2 100%);
  --bg-solid: #F8F8FF;

  --text:        #5b5f6e;
  --text-muted:  rgba(91,95,110,0.72);
  --text-faint:  rgba(91,95,110,0.45);

  --accent:        #91A3B0;
  --accent-2:      #8C92AC;
  --accent-soft:   rgba(140,146,172,0.14);
  --accent-glow:   rgba(145,163,176,0.4);

  --card-bg:      rgba(255,255,255,0.7);
  --card-bg-2:    rgba(255,255,255,0.85);
  --card-border:  rgba(190,191,197,0.55);
  --card-shadow:  0 30px 70px -48px rgba(140,146,172,0.5);

  --field-bg:     rgba(255,255,255,0.8);
  --field-border: rgba(190,191,197,0.6);

  --glow-text: 0 0 24px rgba(255,255,255,0.6);
  --radius: 28px;
  --blur: 18px;

  --hero-title-size: clamp(2.6rem, 7vw, 5.5rem);
}

/* theme transition — everything melts into the new mood */
:root, [data-theme] {
  transition:
    background 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    color 1.2s ease;
}
* {
  transition:
    background-color 0.9s ease,
    border-color 0.9s ease,
    box-shadow 0.9s ease,
    color 0.8s ease;
}