/* Peekaboe webfonts — all four are genuine Google Fonts (per the brand style guide).
   Loaded from Google Fonts so consumers get the exact families with no binaries to ship.
   - Fredoka  : logo + display headlines (the "dancing" wordmark)
   - Quicksand: headings, buttons, product names (600–700)
   - Mali     : body copy (16–18px), a softly handwritten-feeling humanist
   - Handlee  : sparing handwritten accents / eyebrows */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&family=Mali:ital,wght@0,400;0,500;0,600;1,400&family=Handlee&display=swap');
/* ============================================================
   Peekaboe — Colour tokens
   "Energy comes from rounded shapes, not loud colour."
   Warm, cosy, handmade. No neon, no oversaturation.
   ============================================================ */

:root {
  /* ---- Brand palette (base values) ---- */
  --oat-cream:   #E9E2D7; /* primary background */
  --blush-coral: #E8A498; /* secondary / CTAs / koala cheeks */
  --soft-lilac:  #D1C4E9; /* accent */
  --cocoa:       #7D4F41; /* grounding / koala nose / headings */
  --paper:       #FBF8F3; /* card surfaces */
  --cocoa-ink:   #5A4036; /* body text */

  /* ---- Coral ramp (tints/shades of Blush Coral, for hover/press & washes) ---- */
  --coral-100: #F8E5DF; /* soft wash / pill backgrounds */
  --coral-200: #F1C9BF;
  --coral-300: #E8A498; /* = blush coral */
  --coral-400: #DD8B7C; /* hover */
  --coral-500: #C9715F; /* press / text-on-light accent */

  /* ---- Lilac ramp ---- */
  --lilac-100: #EDE7F5; /* soft wash */
  --lilac-200: #DDD2EE;
  --lilac-300: #D1C4E9; /* = soft lilac */
  --lilac-400: #B9A6DA; /* hover */
  --lilac-500: #9E89C4; /* press / accent text */

  /* ---- Cream / neutral ramp ---- */
  --cream-50:  #FBF8F3; /* = paper */
  --cream-100: #F3EDE4;
  --cream-200: #E9E2D7; /* = oat cream */
  --cream-300: #DCD3C5;
  --cream-400: #C9BDAC; /* hairline borders on cream */

  /* ---- Cocoa ramp (koala greys live here too) ---- */
  --cocoa-700: #5A4036; /* = cocoa ink, body */
  --cocoa-600: #6B463A;
  --cocoa-500: #7D4F41; /* = cocoa, headings */
  --cocoa-400: #9A7468; /* muted cocoa / captions */
  --cocoa-300: #B8998E; /* disabled cocoa text */

  /* ---- Koala greys (warm, never cold) ---- */
  --koala-fur:    #C9C3BD; /* main fur */
  --koala-fur-lt: #DAD5CF; /* belly / ears highlight */
  --koala-fur-dk: #A7A099; /* fur shadow */
  --koala-nose:   #7D4F41; /* cocoa nose */
  --koala-cheek:  #E8A498; /* coral cheeks */

  /* ---- Leaf (eucalyptus sprig accent) ---- */
  --leaf:    #8FA98C;
  --leaf-dk: #6E8A6B;

  /* ============================================================
     Semantic aliases — reach for these in components
     ============================================================ */
  --bg-page:        var(--oat-cream);
  --bg-page-warm:   #EFE9DF;       /* alt section band */
  --surface-card:   var(--paper);
  --surface-sunken: var(--cream-100);
  --surface-footer: var(--cocoa-500);

  --text-heading:   var(--cocoa-500);
  --text-body:      var(--cocoa-ink);
  --text-muted:     var(--cocoa-400);
  --text-on-cocoa:  #F4ECE3;       /* reversed text in footer */
  --text-on-coral:  #FFFFFF;

  --accent-primary:    var(--blush-coral); /* CTAs */
  --accent-primary-h:  var(--coral-400);
  --accent-primary-p:  var(--coral-500);
  --accent-secondary:  var(--soft-lilac);  /* accents, tags */

  --border-hairline: var(--cream-400);
  --border-card:     #EFE7DB;

  --pill-bg:    var(--coral-100);
  --pill-text:  var(--coral-500);
  --pill-lilac-bg:   var(--lilac-100);
  --pill-lilac-text: var(--lilac-500);

  --focus-ring: var(--coral-400);
}
/* ============================================================
   Peekaboe — Typography tokens
   Fredoka (display, dances) · Quicksand (UI/headings) ·
   Mali (body) · Handlee (handwritten accents)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Fredoka', 'Quicksand', system-ui, sans-serif; /* logo + big headlines */
  --font-heading: 'Quicksand', system-ui, sans-serif;            /* section headings, product names, buttons */
  --font-body:    'Mali', 'Quicksand', system-ui, sans-serif;    /* paragraphs 16–18px */
  --font-accent:  'Handlee', 'Mali', cursive;                    /* eyebrows / handwritten notes */

  /* ---- Weights ---- */
  --fw-body:     400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-heading:  600; /* @kind other */ /* Quicksand semibold — default heading weight */
  --fw-bold:     700; /* @kind other */

  /* ---- Type scale (display uses Fredoka; rem @ 16px root) ---- */
  --fs-display-xl: 4.5rem;   /* 72px — hero wordmark / hero headline */
  --fs-display-lg: 3.25rem;  /* 52px — section hero */
  --fs-display-md: 2.5rem;   /* 40px */
  --fs-h1:         2rem;     /* 32px */
  --fs-h2:         1.5rem;   /* 24px */
  --fs-h3:         1.25rem;  /* 20px */
  --fs-body-lg:    1.125rem; /* 18px — comfy body */
  --fs-body:       1rem;     /* 16px — min body */
  --fs-small:      0.875rem; /* 14px — captions, pills */
  --fs-eyebrow:    1.0625rem;/* 17px — Handlee reads small, so bump it */

  /* ---- Line heights ---- */
  --lh-tight:   1.05; /* @kind other */ /* display */
  --lh-snug:    1.2;  /* @kind other */ /* headings */
  --lh-body:    1.65; /* @kind other */ /* paragraphs — generous, cosy */
  --lh-relaxed: 1.8;  /* @kind other */

  /* ---- Letter spacing (rounded type wants air, not tightening) ---- */
  --ls-display:  -0.01em;
  --ls-heading:  0.005em;
  --ls-eyebrow:  0.02em;
  --ls-pill:     0.04em;

  /* ---- Semantic aliases ---- */
  --text-hero:    var(--fw-bold) var(--fs-display-xl)/var(--lh-tight) var(--font-display);
  --text-section: var(--fw-bold) var(--fs-display-md)/var(--lh-snug) var(--font-display);
  --text-h2-:     var(--fw-heading) var(--fs-h2)/var(--lh-snug) var(--font-heading);
  --text-body-:   var(--fw-body) var(--fs-body-lg)/var(--lh-body) var(--font-body);
}
/* ============================================================
   Peekaboe — Spacing tokens
   Lots of air. ≥64px between landing sections.
   8px base rhythm.
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;   /* minimum gap between sections */
  --space-20:  80px;
  --space-24:  96px;   /* generous section padding */
  --space-32:  128px;

  /* ---- Semantic ---- */
  --gap-section:     var(--space-24); /* vertical breathing room between sections */
  --gap-section-min: var(--space-16);
  --pad-card:        var(--space-6);
  --pad-card-lg:     var(--space-8);
  --gap-card-grid:   var(--space-6);
  --content-max:     1180px; /* page container width */
  --content-pad:     var(--space-8);
}
/* ============================================================
   Peekaboe — Radius & Shadow tokens
   Soft, rounded, pillowy. NO sharp corners anywhere.
   Shadows are warm-tinted (cocoa-based), never grey/black.
   ============================================================ */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-card: 28px;   /* product cards — the signature radius */
  --radius-xl:   36px;
  --radius-blob: 48px;   /* big soft panels */
  --radius-pill: 999px;  /* buttons + pills are fully round */

  /* ---- Shadows (warm cocoa tint, soft & diffuse) ---- */
  --shadow-xs:   0 1px 2px rgba(125, 79, 65, 0.06);
  --shadow-sm:   0 2px 8px rgba(125, 79, 65, 0.07);
  --shadow-card: 0 10px 28px rgba(125, 79, 65, 0.10);  /* default product-card lift */
  --shadow-md:   0 14px 34px rgba(125, 79, 65, 0.12);
  --shadow-lg:   0 22px 50px rgba(125, 79, 65, 0.15);  /* hover lift / modals */
  --shadow-cta:  0 8px 20px rgba(201, 113, 95, 0.30);  /* coral button glow */

  /* ---- Borders ---- */
  --border-w:      1.5px; /* @kind other */
  --border-hair:   1px solid var(--border-card); /* @kind other */

  /* ---- Motion ---- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* gentle overshoot — the brand "bounce" */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:    160ms; /* @kind other */
  --dur:         240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}