@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Fredoka:wght@400;500;600;700&family=Geist+Mono&display=swap');

/* BonBong-Land — design tokens · groovy sticker theme (cream + rainbow) */
:root {
  /* colour — light, warm cream paper */
  --color-paper:      #FBF3E1;   /* cream background */
  --color-paper-2:    #FFFFFF;   /* card / surface */
  --color-paper-3:    #FFF8E9;   /* hover / tertiary */
  --color-rule:       rgba(60,45,25,0.16); /* soft hairline border */
  --color-hair:       #EEE3C9;   /* very soft warm divider */
  --color-muted:      #9A8A63;   /* warm brown-grey text */
  --color-ink:        #2A2118;   /* warm near-black (text) */
  --color-accent:     #E8702A;   /* megaphone orange — energy */
  --color-accent-strong: #D25E1B;
  --color-accent-ink: #FFFFFF;
  --color-focus:      #3F86CF;

  /* groovy palette (from the logo) */
  --c-blue:    #3F86CF;
  --c-blue-2:  #2E70B5;
  --c-pink:    #E29CD0;
  --c-pink-2:  #D77FBF;
  --c-yellow:  #F5C843;
  --c-yellow-2:#EBB71E;
  --c-green:   #43B36B;
  --c-cream:   #FBF3E1;

  /* blooms (used in page backgrounds) */
  --color-bloom-1:    rgba(226, 156, 208, 0.45); /* pink */
  --color-bloom-2:    rgba(63, 134, 207, 0.34);  /* blue */

  /* shadow — soft, diffuse */
  --shadow-pop:    0 16px 34px -16px rgba(90,60,25,0.40), 0 4px 12px -6px rgba(90,60,25,0.18);
  --shadow-pop-sm: 0 8px 20px -10px rgba(90,60,25,0.32);

  /* type */
  --font-display: "Baloo 2", "Arial Black", sans-serif;
  --font-body:    "Fredoka", "Helvetica Neue", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;

  --text-xs:   0.8rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-digits:   clamp(2.1rem, 7vw, 3.4rem);
  --text-display:  clamp(3.4rem, 16vw, 9rem);
  --text-question: clamp(2.4rem, 10vw, 5.5rem);

  /* space — 4pt scale */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 110ms;
  --dur-short: 160ms;
  --dur-long:  300ms;

  /* depth */
  --z-base:   1;
  --z-raised: 10;
  --z-float:  100;
  --z-sticky: 200;
  --z-modal:  400;

  --radius-card: 22px; /* bubble rounded */
}