/* ============================================
   Design Tokens — 3 Star Kids Brand System
   ============================================ */

:root {
  /* --- Brand Colors (from brand_color.jpg) --- */
  --color-primary:       #66BDEB;   /* Sky blue — dominant brand color */
  --color-navy:          #1B2EA6;   /* Deep navy — headings, footer */
  --color-accent-pink:   #F55980;   /* Hot pink — CTAs, highlights */
  --color-accent-yellow: #FFD700;   /* Yellow — stars, accents */
  --color-accent-green:  #70C87A;   /* Lime green — Frog zone, success */
  --color-accent-red:    #F55980;   /* Hot pink red — pricing, alerts */
  --color-accent-blue:   #66BDEB;   /* Alias for primary */

  /* --- Division Zone Colors --- */
  --color-bear-zone:   #FFF0E6;   /* Warm peach — Family Cafe */
  --color-rabbit-zone: #E8F4FF;   /* Ice blue — Indoor Playground */
  --color-frog-zone:   #E8F5E0;   /* Mint green — Inflatable Rental */

  /* --- System Colors --- */
  --color-heading:     #1B2EA6;   /* Navy for all headings */
  --color-body:        #5A6A7A;   /* Muted slate body text */
  --color-white:       #FFFFFF;
  --color-cream:       #FFF8EB;
  --color-light-gray:  #F6F6F6;
  --color-transparent-20: #FFFFFF2B;

  /* Legacy aliases (keep for backward-compat with layout.css bg utilities) */
  --color-button:       #F55980;   /* Hot pink as primary button */
  --color-button-hover: #66BDEB;   /* Sky blue on hover */
  --color-dark-bg:      #1B2EA6;   /* Navy */
  --color-light-bg:     #E8F4FF;   /* Rabbit zone */
  --color-line:         #FFFFFF;
  --color-line-2:       #E0E0E0;

  /* Forms */
  --color-form-bg:      #F4F4F4;
  --color-form-border:  #E0E0E0;
  --color-form-text:    #1B2EA6;

  /* --- Typography --- */
  --font-heading:   'Fredoka One', cursive;
  --font-body:      'Nunito', sans-serif;
  --font-accent:    'Amatic SC', cursive;
  --font-secondary: 'Nunito', sans-serif;
  --font-label:     'Nunito', sans-serif;

  /* Font Sizes */
  --fs-h1:     80px;
  --fs-h2:     48px;
  --fs-h3:     36px;
  --fs-h4:     26px;
  --fs-h5:     18px;
  --fs-h6:     22px;
  --fs-body:   16px;
  --fs-small:  14px;
  --fs-footer: 13px;
  --fs-button: 15px;

  /* Line Heights */
  --lh-h1: 1.05;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-h4: 1.3;
  --lh-h5: 1.4;
  --lh-h6: 1.4;
  --lh-body: 1.6;

  /* --- Layout --- */
  --container-width: 1280px;
  --border-radius:      16px;
  --border-radius-pill: 999px;
  --border-radius-card: 24px;

  /* Breakpoints: tablet 1024px, mobile 767px */
}