/* ═══════════════════════════════════════════════════════════
   Baby Sleep Planner — CSS variables for static blog pages
   Mirrors global.css exactly so blog/articles match app themes
   Applied via data-theme attribute set by theme-inject.js
   ═══════════════════════════════════════════════════════════ */

/* ── BOY (default) ── */
:root, [data-theme="boy"] {
  --bg:            #EEF4FA;
  --bg2:           #FFFFFF;
  --bg3:           #E2EBF4;
  --surface:       rgba(255,255,255,0.88);
  --accent:        #81A4CD;
  --accent-deep:   #3E7CB1;
  --accent-soft:   rgba(129,164,205,0.14);
  --accent-mid:    rgba(62,124,177,0.22);
  --label:         #1A2436;
  --label2:        #506080;
  --label3:        #8BA8C4;
  --border:        rgba(129,164,205,0.22);
  --border-strong: rgba(62,124,177,0.30);
  --shadow-sm:     0 2px 8px rgba(62,124,177,0.06);
  --shadow-md:     0 4px 20px rgba(62,124,177,0.10);
  color-scheme: light;
}

/* ── GIRL ── */
[data-theme="girl"] {
  --bg:            #FEF6F3;
  --bg2:           #FFFFFF;
  --bg3:           #F8E8E2;
  --surface:       rgba(255,255,255,0.88);
  --accent:        #D4897A;
  --accent-deep:   #B5604E;
  --accent-soft:   rgba(212,137,122,0.14);
  --accent-mid:    rgba(181,96,78,0.22);
  --label:         #381816;
  --label2:        #7A4840;
  --label3:        #C49090;
  --border:        rgba(212,137,122,0.22);
  --border-strong: rgba(181,96,78,0.30);
  --shadow-sm:     0 2px 8px rgba(181,96,78,0.06);
  --shadow-md:     0 4px 20px rgba(181,96,78,0.10);
  color-scheme: light;
}

/* ── NEUTRAL ── */
[data-theme="neutral"] {
  --bg:            #FAF7F2;
  --bg2:           #FFFFFF;
  --bg3:           #F0E8DA;
  --surface:       rgba(255,255,255,0.88);
  --accent:        #C09060;
  --accent-deep:   #8A6238;
  --accent-soft:   rgba(192,144,96,0.14);
  --accent-mid:    rgba(138,98,56,0.22);
  --label:         #2A2010;
  --label2:        #6A5838;
  --label3:        #AA9878;
  --border:        rgba(192,144,96,0.22);
  --border-strong: rgba(138,98,56,0.30);
  --shadow-sm:     0 2px 8px rgba(138,98,56,0.06);
  --shadow-md:     0 4px 20px rgba(138,98,56,0.10);
  color-scheme: light;
}

/* ── GRAPHITE ── */
[data-theme="graphite"] {
  --bg:            #15181E;
  --bg2:           #1E222A;
  --bg3:           #252B34;
  --surface:       rgba(30,34,42,0.92);
  --accent:        #84A59D;
  --accent-deep:   #5A8880;
  --accent-soft:   rgba(132,165,157,0.16);
  --accent-mid:    rgba(90,136,128,0.24);
  --label:         #E2E8F0;
  --label2:        #8898AC;
  --label3:        #4A5A6C;
  --border:        rgba(132,165,157,0.14);
  --border-strong: rgba(90,136,128,0.22);
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.35);
  color-scheme: dark;
}

/* ── Shared base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg);
  color: var(--label);
  transition: background 0.3s ease, color 0.3s ease;
}