/* ============================================================
   Family Command Centre — theme-playful.css
   ------------------------------------------------------------
   "Playful" — fun, bright, rounded, big friendly buttons.
   Bundles its own fonts locally (../fonts/*.woff2) so it works
   fully offline under file:// — no CDN, no remote assets.

   THIS FILE DEFINES EVERY COLOUR, FONT, RADIUS AND SHADOW, plus
   (per this theme's own design) the coloured pill-button styling
   for the left-hand navigation. theme-base.css stays untouched —
   all structure/layout there is theme-agnostic. To go back to
   the calm default look, swap the <link> in index.html back to
   theme-warm-linen.css; nothing else needs to change.
   ============================================================ */

/* ---- Local fonts (downloaded once at build time, bundled in
   /fonts — never fetched from a CDN at runtime) ---- */
@font-face {
  font-family: "Poetsen One";
  font-style: normal;
  font-weight: 400; /* Poetsen One ships one weight only */
  font-display: swap;
  src: url("../fonts/poetsen-one-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/quicksand-variable.woff2") format("woff2");
}

:root {
  /* ---- Semantic palette (the 7 named Playful colours) ----
     Nav pills and other bold accents reference these directly. */
  --palette-pink: #FF6B8B;
  --palette-orange: #FF9F1C;
  --palette-yellow: #FFD93D;
  --palette-green: #6BCB77;
  --palette-teal: #00C2D1;
  --palette-blue: #4D7CFE;
  --palette-purple: #B06CFF;

  /* ---- Core palette ---- */
  --color-bg: #FFF8EC;               /* warm cream page background */
  --color-bg-accent: #FFF0DA;        /* sidebar */
  --color-card: #FFFFFF;
  --color-card-alt: #FFF7EA;

  --color-primary: #4D7CFE;          /* bright playful blue — main actions */
  --color-primary-strong: #3A63DB;
  --color-primary-soft: #E4EBFF;
  --color-on-primary: #FFFFFF;

  --color-accent: #FF6B8B;           /* pink — highlights */
  --color-accent-soft: #FFE3E9;

  --color-text: #3A2E45;             /* warm dark plum-brown */
  --color-text-muted: #8C7F97;
  --color-text-faint: #C9BFCF;

  --color-border: #FFE7C2;
  --color-border-strong: #FFD397;

  --color-danger: #FF4D6D;
  --color-danger-soft: #FFE1E7;
  --color-success: #3FA84E;
  --color-success-soft: #E1F6E3;
  --color-warning: #E8A800;
  --color-warning-soft: #FFF1CC;

  /* ---- Typography ---- */
  --font-heading: "Poetsen One", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-accent: "Quicksand", system-ui, sans-serif; /* family quote */

  --font-size-base: 16px;
  --font-weight-heading: 700; /* bold + rounded, per the Playful brief */

  /* ---- Shape & depth: bigger, bolder, friendlier ---- */
  --radius-card: 26px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --radius-checkbox: 8px;   /* deliberately smaller/squarer than --radius-control */
  --radius-chip: 6px;       /* calendar event chips — smaller still */

  --shadow-card: 0 2px 4px rgba(176, 108, 255, 0.08), 0 12px 26px rgba(255, 107, 139, 0.10);
  --shadow-raised: 0 6px 14px rgba(77, 124, 254, 0.14), 0 20px 46px rgba(176, 108, 255, 0.16);
  --shadow-modal: 0 26px 70px rgba(58, 46, 69, 0.32);
  --color-overlay: rgba(58, 46, 69, 0.45); /* modal backdrop scrim */

  /* ---- Spacing scale (unchanged — structural, not a "look") ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---- Family member colour tokens (c1..c16) — all rooted in
     the 7-colour Playful palette, tints/shades added to reach 16
     distinct, legible hues (white initials stay readable on all
     of them — true pale yellow is intentionally deepened here). */
  --member-c1: #FF6B8B;   /* pink */
  --member-c2: #4D7CFE;   /* blue */
  --member-c3: #FF9F1C;   /* orange */
  --member-c4: #6BCB77;   /* green */
  --member-c5: #B06CFF;   /* purple */
  --member-c6: #00C2D1;   /* teal */
  --member-c7: #E8A800;   /* deep gold (readable stand-in for yellow) */
  --member-c8: #FF8FA3;   /* light pink */
  --member-c9: #7C9CFF;   /* light blue */
  --member-c10: #FFB84D;  /* light orange */
  --member-c11: #8FDB98;  /* light green */
  --member-c12: #C79AFF;  /* light purple */
  --member-c13: #4DD9E3;  /* light teal */
  --member-c14: #E85D8A;  /* deep rose */
  --member-c15: #3E5FCC;  /* deep blue */
  --member-c16: #D97A0A;  /* deep amber */

  /* ---- Event category colours ---- */
  --cat-school: #4D7CFE;
  --cat-homework: #00C2D1;
  --cat-tutoring: #0E8C97;
  --cat-sport: #6BCB77;
  --cat-fitness: #3FA84E;
  --cat-work: #B06CFF;
  --cat-appointment: #FF9F1C;
  --cat-birthday: #FF6B8B;
  --cat-social: #E8A800;
  --cat-home: #B7A6C9;
  --cat-other: #6B6875;
}

/* ---- Subtle doodle wallpaper: stars, dots, wavy lines — pure
   CSS/SVG, no external image file, baked-in low opacity so it
   never competes with text (cards sit opaque on top of it). ---- */
body {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJyB2aWV3Qm94PScwIDAgMjIwIDIyMCc+CjxnIG9wYWNpdHk9JzAuNCcgZmlsbD0nbm9uZScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz4KPHBhdGggZD0nTTEyIDU1IFEyNyA0MCA0MiA1NSBUNzIgNTUnIHN0cm9rZT0nI0IwNkNGRicgc3Ryb2tlLXdpZHRoPSczJyBzdHJva2Utb3BhY2l0eT0nMC4xNScvPgo8cGF0aCBkPSdNMTMwIDE3NSBRMTQ1IDE2MCAxNjAgMTc1IFQxOTAgMTc1JyBzdHJva2U9JyMwMEMyRDEnIHN0cm9rZS13aWR0aD0nMycvPgo8Y2lyY2xlIGN4PScxODUnIGN5PScyOCcgcj0nMy4yJyBmaWxsPScjRkY2QjhCJyBzdHJva2U9J25vbmUnLz4KPGNpcmNsZSBjeD0nMzgnIGN5PScxMzAnIHI9JzIuNicgZmlsbD0nIzREN0NGRScgc3Ryb2tlPSdub25lJy8+CjxjaXJjbGUgY3g9JzEwMCcgY3k9JzE1JyByPScyLjInIGZpbGw9JyNGRjlGMUMnIHN0cm9rZT0nbm9uZScvPgo8Y2lyY2xlIGN4PSc2NScgY3k9JzE5OCcgcj0nMi42JyBmaWxsPScjNkJDQjc3JyBzdHJva2U9J25vbmUnLz4KPGNpcmNsZSBjeD0nMTk1JyBjeT0nMTIwJyByPScyLjInIGZpbGw9JyNCMDZDRkYnIHN0cm9rZT0nbm9uZScvPgo8cG9seWdvbiBwb2ludHM9JzE2MCw3NSAxNjIsODIgMTY5LDg0IDE2Miw4NiAxNjAsOTMgMTU4LDg2IDE1MSw4NCAxNTgsODInIGZpbGw9JyNGRkQ5M0QnIHN0cm9rZT0nbm9uZScvPgo8cG9seWdvbiBwb2ludHM9JzI3LDE2OCAyOC42LDE3Mi42IDMzLjIsMTc0LjIgMjguNiwxNzUuOCAyNywxODAuNCAyNS40LDE3NS44IDIwLjgsMTc0LjIgMjUuNCwxNzIuNicgZmlsbD0nI0ZGNkI4Qicgc3Ryb2tlPSdub25lJy8+Cjxwb2x5Z29uIHBvaW50cz0nMTEwLDExMCAxMTEuNCwxMTQgMTE1LjQsMTE1LjQgMTExLjQsMTE2LjggMTEwLDEyMC44IDEwOC42LDExNi44IDEwNC42LDExNS40IDEwOC42LDExNCcgZmlsbD0nIzREN0NGRScgc3Ryb2tlPSdub25lJy8+CjwvZz4KPC9zdmc+Cg==");
  background-repeat: repeat;
  background-size: 220px 220px;
}

/* ============================================================
   Left-hand navigation: colourful pill buttons (Playful only).
   Structure (flex/padding/sizing) stays in theme-base.css —
   this theme just paints each nav-btn with its own colour and
   gives the active one a bolder, glowing highlight.
   ============================================================ */
.nav-btn {
  border: 2px solid transparent;
  color: #FFFFFF;
  font-weight: 600;
  margin-bottom: 2px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.nav-btn:hover { transform: translateX(2px); }

.nav-btn[data-view="dashboard"] { background: var(--palette-yellow); color: #4A3B00; }
.nav-btn[data-view="calendar"]  { background: var(--palette-blue); }
.nav-btn[data-view="family"]    { background: var(--palette-pink); }
.nav-btn[data-view="goals"]     { background: var(--palette-purple); }
.nav-btn[data-view="meals"]     { background: var(--palette-orange); }
.nav-btn[data-view="shopping"]  { background: var(--palette-teal); }
.nav-btn[data-view="chores"]    { background: var(--palette-green); }
.nav-btn[data-view="school"]    { background: var(--member-c15); } /* deep blue */
.nav-btn[data-view="weekly"]    { background: var(--member-c16); } /* deep amber */
.nav-btn[data-view="pets"]      { background: var(--member-c14); } /* deep rose */
.nav-btn[data-view="meds"]      { background: var(--member-c13); color: #05353A; } /* light teal — dark text for contrast */
.nav-btn[data-view="info"]      { background: var(--member-c5); }  /* purple */
.nav-btn[data-view="settings"]  { background: var(--member-c15); color: #FFFFFF; }

.nav-btn.active {
  border-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), var(--shadow-raised);
  transform: scale(1.035);
  font-weight: 700;
}
.nav-btn:not(.active):hover { box-shadow: var(--shadow-card); }