/* Declare cascade layer order for the entire site */
@layer tokens, base, components, sections, animations;

@layer tokens {
  :root {
    /* Brand palette */
    --blue:        #7BD3F0;
    --blue-deep:   #4FB5D9;
    --blue-soft:   #B6E5F4;
    --orange:      #EE7C36;
    --orange-deep: #D9651F;
    --yellow:      #F7D679;
    --pink:        #F2B5CD;
    --green:       #9CCE91;
    --purple:      #BCA8E8;

    /* Neutrals */
    --ink:         #2A2520;
    --cream:       #FBF4E2;
    --cream-soft:  #FFF8E8;

    /* Typography */
    --font-body:    'Nunito', system-ui, sans-serif;
    --font-display: 'Luckiest Guy', 'Nunito', sans-serif;
    --font-zh:      'Noto Sans SC', sans-serif;
    --font-hand:    'Caveat', cursive;

    /* Spacing scale */
    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  22px;
    --radius-xl:  28px;
    --radius-pill: 999px;
  }
}