/* ==========================================================================
   PlayNest — Brand Tokens
   --------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for colour + type.
   Change a value here and it updates everywhere on the site.
   Palette sampled directly from "PlayNest - Branding.png" (brand board).
   ========================================================================== */

:root{
  /* ---------- Core palette ---------- */
  --pn-teal:        #36A8A8;   /* primary brand colour — logo badge          */
  --pn-teal-dark:   #2A8A8A;   /* hovers, pressed states                     */
  --pn-teal-light:  #6FC4C4;   /* tints, subtle fills                        */
  --pn-yellow:      #F6BE2D;   /* accent — "Learn", highlights, stars        */
  --pn-coral:       #EA845E;   /* accent — CTAs, warm highlights             */
  --pn-green:       #7BA03A;   /* accent — "Grow", success states            */
  --pn-cream:       #F4EAD8;   /* page background                            */
  --pn-navy:        #162C3B;   /* headings + body text                       */

  /* ---------- Derived / support ---------- */
  --pn-cream-soft:  #FBF5EA;   /* cards on cream                             */
  --pn-white:       #FFFFFF;
  --pn-ink:         var(--pn-navy);
  --pn-ink-soft:    #5B6B77;   /* secondary text                             */
  --pn-line:        rgba(22,44,59,.10);

  /* ---------- Typography ----------
     Brand typeface: Poppins (brand board specifies "Poppins Rounded").
     Loaded from Google Fonts in index.html. To self-host the licensed
     rounded cut instead, drop the files into /assets/fonts/ and the
     @font-face blocks at the bottom of this file will pick them up. */
  --pn-font:         'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pn-font-display: 'PlayNest Display', 'Poppins', system-ui, sans-serif;

  --pn-w-regular: 400;
  --pn-w-medium:  500;
  --pn-w-semi:    600;
  --pn-w-bold:    700;
  --pn-w-black:   800;

  /* ---------- Shape & depth ---------- */
  --pn-radius-sm: 12px;
  --pn-radius:    20px;
  --pn-radius-lg: 28px;
  --pn-radius-pill: 999px;
  --pn-shadow:    0 10px 30px rgba(22,44,59,.10);
  --pn-shadow-lg: 0 20px 50px rgba(22,44,59,.14);
}

/* ==========================================================================
   OPTIONAL — self-hosted brand font
   --------------------------------------------------------------------------
   If you have the licensed "Poppins Rounded" (or any custom brand cut),
   drop the .woff2 files into /assets/fonts/ using these exact names and
   they will be used automatically — no other edits needed:

       assets/fonts/playnest-display-700.woff2
       assets/fonts/playnest-display-800.woff2

   Until those files exist, the browser silently falls back to Poppins.
   ========================================================================== */
@font-face{
  font-family:'PlayNest Display';
  src:url('../fonts/playnest-display-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'PlayNest Display';
  src:url('../fonts/playnest-display-800.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}