/* ════════════════════════════════════════════════════════════════════
   The Parent Room — Premium Design Layer
   Loads AFTER master_styles.css and the colour-scheme file.

   SCHEME-AWARE: this layer never hard-codes the accent colour. It reads the
   active scheme's own ramp (--color-50 … --color-800, redefined by each
   *-colours.css file) so the user's chosen colour scheme still personalises
   the app. The premium "feel" — warm paper, Fraunces/Inter, soft shadows,
   generous radius — stays constant, while the accent follows the scheme.

   Neutral surfaces use var(--tpr-*, <light fallback>). The five light schemes
   use the fallbacks; the inverted "access" (dark, high-contrast) scheme sets
   its own --tpr-* neutrals in access-colours.css so it stays dark and legible.

   Reversible: remove the <link> to premium.css in index.php to revert.
   Non-destructive: existing class hooks (IDs, JS classes) are untouched.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Fixed across all schemes — geometry & elevation only, never colour */
  --tpr-radius: 22px;
  --tpr-radius-lg: 28px;
  --tpr-shadow: 0 24px 60px -32px rgba(96, 72, 90, .35);
  --tpr-shadow-soft: 0 12px 32px -18px rgba(96, 72, 90, .26);
  --tpr-shadow-xs: 0 6px 18px -12px rgba(96, 72, 90, .30);
}

/* ── Typography ───────────────────────────────────────────────────── */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body {
  background: var(--tpr-paper, #fdf8f4) !important;
  color: var(--tpr-ink, #403949);
}
.title-font {
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -0.005em;
  color: var(--tpr-ink, #403949);
}
.baby-font { font-family: 'Caveat', cursive !important; }

/* Shell sits on the paper surface, not a flat tint */
main.bg-color-100, body > main { background: transparent !important; }

/* Primary text becomes soft ink; the scheme's own .text-color-700/600
   classes are left ALONE so accents keep following the chosen scheme. */
.text-color-800 { color: var(--tpr-ink, #403949) !important; }

/* ── Gradient + kicker helpers (scheme-driven) ────────────────────── */
.grad-text {
  background: linear-gradient(105deg, var(--color-800), var(--color-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tpr-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-700); margin-bottom: .35rem; display: block;
}
.tpr-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--tpr-card, #fff); border: 1px solid var(--tpr-line, #efe6e0);
  padding: .4rem .85rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  color: var(--color-700); box-shadow: var(--tpr-shadow-soft);
}
.tpr-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-500);
  animation: tprPulse 2.4s infinite;
}
@keyframes tprPulse { 0% { box-shadow: 0 0 0 0 var(--color-300);} 70% { box-shadow: 0 0 0 10px transparent;} }

/* ── Cards: warm surface, hairline, soft diffuse shadow ───────────── */
.bg-white.rounded-2xl,
.bg-white.rounded-3xl,
.bg-white.rounded-xl {
  background: var(--tpr-card, #fff) !important;
  border: 1px solid var(--tpr-line, #efe6e0);
  box-shadow: var(--tpr-shadow-soft) !important;
}
.rounded-2xl { border-radius: var(--tpr-radius) !important; }
.rounded-3xl { border-radius: var(--tpr-radius-lg) !important; }

/* ── Header & bottom nav: soft surface with blur ──────────────────── */
header.bg-color-200 {
  background: var(--tpr-paper, #fdf8f4) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tpr-line, #efe6e0) !important;
}
#bottomNav.bg-color-200 {
  background: var(--tpr-paper, #fdf8f4) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--tpr-line, #efe6e0) !important;
}
#bottomNav .navBtn { border-radius: 16px; transition: .25s; }
#bottomNav .navBtn.bg-color-500 {
  background: linear-gradient(135deg, var(--color-100), var(--color-200)) !important;
}
#bottomNav .navBtn.bg-color-500 i, #bottomNav .navBtn.bg-color-500 span { color: var(--color-800) !important; }

/* Header level progress bar in the scheme accent */
#headerProgressBar { background: linear-gradient(105deg, var(--color-500), var(--color-700)) !important; }

/* ── Buttons: gradient primary in the scheme accent ───────────────── */
.bg-color-500 {
  background: linear-gradient(105deg, var(--color-400), var(--color-700)) !important;
}
button.bg-color-500, .bg-color-500.btn, a.bg-color-500 {
  box-shadow: var(--tpr-shadow-xs);
  transition: transform .2s ease, box-shadow .2s ease;
}
button.bg-color-500:hover, a.bg-color-500:hover {
  transform: translateY(-2px); box-shadow: var(--tpr-shadow-soft);
}
.bg-color-600 { background: linear-gradient(105deg, var(--color-600), var(--color-800)) !important; }

/* ── Section tiles (big action tiles carry bg-color-300) ──────────── */
.sectionBtn.bg-color-300 {
  background: linear-gradient(160deg, var(--tpr-card, #fff), var(--tpr-paper-2, #fbf2ec)) !important;
  border: 1px solid var(--tpr-line, #efe6e0);
  border-radius: 18px !important;
  box-shadow: var(--tpr-shadow-xs);
  color: var(--tpr-ink, #403949) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sectionBtn.bg-color-300:hover { transform: translateY(-4px); box-shadow: var(--tpr-shadow-soft); }
.sectionBtn.bg-color-300 h3 { color: var(--tpr-ink, #403949) !important; }

/* Icon chips: flat glyphs become crafted, accent-tinted badges */
.sectionBtn.bg-color-300 i.fa-2x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(135deg, var(--color-100), var(--color-200));
  color: var(--color-800) !important;
  box-shadow: var(--tpr-shadow-xs), inset 0 0 0 1px rgba(255, 255, 255, .4);
}

/* ── Avatar: a soft halo so the character people love feels special ── */
#home_avatar, #home_pu_avatar {
  display: inline-block; border-radius: 50%; padding: 5px;
  background: radial-gradient(circle at 50% 32%, var(--tpr-card, #fff), var(--tpr-paper-2, #fbf2ec));
  box-shadow: 0 14px 34px -18px rgba(96, 72, 90, .45), inset 0 0 0 1px var(--tpr-line, #efe6e0);
}
[id^="avatar_au_"] svg, #avatar_pu svg, #avatar svg {
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--tpr-line, #efe6e0);
}

/* ── Pills / chips inherit a hairline ─────────────────────────────── */
.rounded-full.bg-color-100, .rounded-full.bg-color-200 {
  border: 1px solid var(--tpr-line, #efe6e0);
}

/* ── Inputs ───────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=tel], input[type=number], select, textarea {
  border-radius: 14px !important;
  border: 1px solid var(--tpr-line, #efe6e0) !important;
  background: var(--tpr-card, #fff);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--color-500) !important;
  box-shadow: 0 0 0 3px var(--color-200) !important;
}

/* ── Shadows: replace the flat default with soft diffuse ──────────── */
.shadow-sm { box-shadow: var(--tpr-shadow-soft) !important; }
.shadow { box-shadow: var(--tpr-shadow-soft) !important; }
.shadow-lg { box-shadow: var(--tpr-shadow) !important; }

/* The 3D image circle gets a soft inner halo */
.rotating-image { box-shadow: inset 0 0 30px rgba(255, 255, 255, .45); }

/* ── Gentle reveal animation for redesigned sections ──────────────── */
.tpr-reveal { opacity: 0; transform: translateY(20px); transition: .8s cubic-bezier(.16,1,.3,1); }
.tpr-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tpr-reveal { opacity: 1 !important; transform: none !important; }
  .sectionBtn, button.bg-color-500 { transition: none !important; }
}