/* ============================================================================
   PRONOLINO — per-theme CSS custom properties + Google fonts.
   Set document.documentElement.dataset.theme = "espace|safari|polaire|bonbon".
   Values mirror PL.themeMeta() / the design file design-serie2.dc.html.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Chewy&family=Fredoka:wght@500;600;700&family=Quicksand:wght@500;600;700&family=Nunito:wght@400;500;600;700;800;900&display=swap");

/* ---- defaults (also the body font everywhere) ---------------------------- */
:root {
  --pl-body-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===================== ESPACE — cosmos, planètes & étoiles ================ */
:root[data-theme="espace"] {
  --pl-emoji: "🚀";
  --pl-title-font: 'Fredoka', sans-serif;
  --pl-page-bg: linear-gradient(180deg, #15132B, #221E40);
  --pl-card: linear-gradient(180deg, #1E1B3A, #2A2350);
  --pl-card-border: #3A3560;
  --pl-title: #ECE9FF;
  --pl-sub: #B4ABDA;
  --pl-eyebrow: #9C9CE8;
  --pl-plot-bg: linear-gradient(180deg, #262248, #332C56);
  --pl-grid: rgba(255,255,255,.06);
  --pl-axis: rgba(255,255,255,.22);
  --pl-axis-text: #8E88C8;
  --pl-name: #E6E1F8;
  --pl-cap: #9C9CE8;
  --pl-marker: #E8C56A;
  --pl-marker-halo: rgba(232,197,106,.18);
  --pl-btn-gradient: linear-gradient(135deg, #8A8AE0, #6E6AC8);
  --pl-btn-text: #fff;
  --pl-btn-shadow: 0 8px 18px rgba(110,106,200,.3);
  --pl-field-bg: rgba(46,42,84,.5);
  --pl-field-border: rgba(255,255,255,.1);
  --pl-accent: #8A8AE0;
}

/* ===================== SAFARI — savane, animaux & feuillage =============== */
:root[data-theme="safari"] {
  --pl-emoji: "🦁";
  --pl-title-font: 'Chewy', cursive;
  --pl-page-bg: linear-gradient(180deg, #F7E4A6 0%, #F1D281 46%, #E8BC6A 100%);
  --pl-card: linear-gradient(180deg, #F7E4A6 0%, #F1D281 46%, #E8BC6A 100%);
  --pl-card-border: #DEC487;
  --pl-title: #4E6B2E;
  --pl-sub: #6E7A4E;
  --pl-eyebrow: #7AA85C;
  --pl-plot-bg: linear-gradient(180deg, #FAFBEE, #EEEFD2);
  --pl-grid: #E8EACE;
  --pl-axis: #C6CCA0;
  --pl-axis-text: #7E9252;
  --pl-name: #4E6B2E;
  --pl-cap: #88925E;
  --pl-marker: #C99A4C;
  --pl-marker-halo: rgba(201,154,76,.18);
  --pl-btn-gradient: linear-gradient(135deg, #8AB468, #6E984E);
  --pl-btn-text: #fff;
  --pl-btn-shadow: 0 8px 18px rgba(110,152,78,.26);
  --pl-field-bg: #fff;
  --pl-field-border: #E2E6C8;
  --pl-accent: #6E984E;
}

/* ===================== POLAIRE — neige, cocon & maille douce ============== */
:root[data-theme="polaire"] {
  --pl-emoji: "❄️";
  --pl-title-font: 'Quicksand', sans-serif;
  --pl-page-bg: linear-gradient(180deg, #CFE2F2 0%, #BCD6EC 50%, #E2EEF8 100%);
  --pl-card: linear-gradient(180deg, #CFE2F2 0%, #BCD6EC 50%, #E2EEF8 100%);
  --pl-card-border: #BAD2E6;
  --pl-title: #356488;
  --pl-sub: #5A82A0;
  --pl-eyebrow: #5A8EB8;
  --pl-plot-bg: linear-gradient(180deg, #F6FAFE, #E6F1FA);
  --pl-grid: #E2EDF5;
  --pl-axis: #ABCCE0;
  --pl-axis-text: #6A9CC0;
  --pl-name: #356488;
  --pl-cap: #6A98BC;
  --pl-marker: #5A8EB8;
  --pl-marker-halo: rgba(90,142,184,.18);
  --pl-btn-gradient: linear-gradient(135deg, #7EAED4, #5A8EB8);
  --pl-btn-text: #fff;
  --pl-btn-shadow: 0 8px 18px rgba(90,142,184,.26);
  --pl-field-bg: #fff;
  --pl-field-border: #DCEAF4;
  --pl-accent: #5A8EB8;
}

/* ===================== BONBON — pastel multicolore & gourmand ============= */
:root[data-theme="bonbon"] {
  --pl-emoji: "🍬";
  --pl-title-font: 'Baloo 2', cursive;
  --pl-page-bg: linear-gradient(180deg, #F3ECFB, #E8F4EE);
  --pl-card: linear-gradient(180deg, #F3ECFB, #E8F4EE);
  --pl-card-border: #E4DCF0;
  --pl-title: #7E63B6;
  --pl-sub: #8A7AA8;
  --pl-eyebrow: #C77AA8;
  --pl-plot-bg: linear-gradient(180deg, #FBF8FE, #F2F8F4);
  --pl-grid: rgba(150,130,200,.3);
  --pl-axis: #D6C6EC;
  --pl-axis-text: #A085CC;
  --pl-name: #7E63B6;
  --pl-cap: #A38FC8;
  --pl-marker: #C77AA8;
  --pl-marker-halo: rgba(199,122,168,.18);
  --pl-btn-gradient: linear-gradient(135deg, #F2A0C4, #B8A6E2);
  --pl-btn-text: #fff;
  --pl-btn-shadow: 0 8px 20px rgba(150,130,200,.28);
  --pl-field-bg: #fff;
  --pl-field-border: #EEE6F6;
  --pl-accent: #B8A6E2;
}