/* =========================================================
   POLAR BEAR — DESIGN TOKENS
   Sampled directly from brand mockups. Single source of truth
   for every color, font, spacing and shadow used in the theme.
   ========================================================= */

:root {
  /* ---- Color: neutrals & surfaces ---- */
  --pb-bg:               #FDFDFC;   /* main page background, off-white */
  --pb-bg-cream:         #F8F4F1;   /* footer / soft section background */
  --pb-bg-announcement:  #F3E6DB;   /* top utility bar */
  --pb-bg-tan:           #DFC7B3;   /* hero / lifestyle photo backdrop tone */
  --pb-surface:          #FFFFFF;   /* cards */
  --pb-border:           #EDE6DE;   /* hairline borders */
  --pb-border-strong:    #E2D6C9;

  /* ---- Color: text ---- */
  --pb-ink:              #17130F;   /* headings, near-black (warm, not pure grey-black) */
  --pb-body:             #4A433C;   /* paragraph text */
  --pb-muted:            #8A8079;   /* captions, meta */

  /* ---- Color: brand accent ---- */
  --pb-terracotta:       #C97D44;   /* accent word, links, active states */
  --pb-terracotta-dark:  #A8632F;
  --pb-terracotta-tint:  #F6E9DF;   /* pale accent background chip */

  /* ---- Color: functional ---- */
  --pb-black:            #181817;   /* primary CTA buttons */
  --pb-black-hover:      #2B2A28;
  --pb-star:             #F2A529;   /* rating stars */
  --pb-sale:             #C0473B;   /* sale price / badges */
  --pb-success:          #4B7A5B;   /* in stock, secure payment */
  --pb-cart-green:       #7AA874;   /* cute sage green — Add to Cart buttons */
  --pb-cart-green-dark:  #649160;
  --pb-whatsapp:         #25D366;

  /* ---- Typography ---- */
  --pb-font-display: "Playfair Display", "Georgia", serif;
  --pb-font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pb-fs-display-xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.4rem);
  --pb-fs-display-lg: clamp(1.7rem, 1.4rem + 1.2vw, 2.25rem);
  --pb-fs-display-md: 1.5rem;
  --pb-fs-h3:        1.15rem;
  --pb-fs-body:      0.95rem;
  --pb-fs-small:     0.82rem;
  --pb-fs-tiny:      0.72rem;

  --pb-lh-display: 1.15;
  --pb-lh-body: 1.65;

  /* ---- Spacing scale (8px base) ---- */
  --pb-space-1: 4px;
  --pb-space-2: 8px;
  --pb-space-3: 12px;
  --pb-space-4: 16px;
  --pb-space-5: 24px;
  --pb-space-6: 32px;
  --pb-space-7: 48px;
  --pb-space-8: 64px;
  --pb-space-9: 96px;

  /* ---- Radius ---- */
  --pb-radius-sm: 8px;
  --pb-radius-md: 14px;
  --pb-radius-lg: 22px;
  --pb-radius-pill: 999px;

  /* ---- Shadows (soft, warm-tinted — never pure black) ---- */
  --pb-shadow-sm: 0 2px 8px rgba(90, 70, 50, 0.06);
  --pb-shadow-md: 0 8px 24px rgba(90, 70, 50, 0.10);
  --pb-shadow-lg: 0 20px 48px rgba(60, 45, 30, 0.14);
  --pb-shadow-hover: 0 14px 30px rgba(90, 70, 50, 0.16);

  /* ---- Motion ---- */
  --pb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pb-speed-fast: 180ms;
  --pb-speed-med: 320ms;
  --pb-speed-slow: 600ms;

  /* ---- Layout ---- */
  --pb-container: 1280px;
  --pb-container-narrow: 760px;
}