/* ============================================================
   TOMOTOMO FRIENDS — DESIGN TOKENS
   Satu tempat untuk semua nilai desain.
   Ubah di sini → berlaku di seluruh website.
   ============================================================ */

:root {

  /* ── BRAND COLORS ── */
  --clr-navy:       #1e40af;   /* navbar blue */
  --clr-navy-dark:  #0b1730;   /* footer deep navy */
  --clr-navy-mid:   #1a2fa8;   /* mobile menu bg */
  --clr-body-bg:    #111827;   /* page background */

  --clr-green:      #7dda3e;   /* WELCOME TO arc, Tomotomo Land */
  --clr-green-dark: #1e3d06;   /* text stroke */
  --clr-yellow:     #ffe040;   /* Our Story, Nara */
  --clr-yellow-warm:#fbbf24;
  --clr-orange:     #ffb347;   /* Banana Land, Yo-Min */
  --clr-pink:       #ff4ba8;   /* Contact nav, Rere */
  --clr-pink-soft:  #ff6fd8;
  --clr-cyan:       #4adfff;   /* About nav, Grand Town */
  --clr-purple:     #d580ff;   /* Magical Village, Sisi */
  --clr-lime:       #c8ff44;   /* Bobo */
  --clr-teal:       #42ffd6;
  --clr-red:        #ff4444;

  /* Nav button colors */
  --clr-n-about:    #4adfff;
  --clr-n-content:  #ffb347;
  --clr-n-music:    #7dda3e;
  --clr-n-contact:  #ff4ba8;

  /* ── TYPOGRAPHY ── */
  --font-display:   'Horizon', sans-serif;
  --font-title:     'Fredoka One', cursive;
  --font-body:      'Nunito', sans-serif;

  /* ── SPACING SCALE ── */
  --sp-2xs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  20px;
  --sp-lg:  32px;
  --sp-xl:  48px;
  --sp-2xl: 72px;

  /* ── BORDER RADIUS ── */
  --r-xs:   6px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ── SHADOWS ── */
  --shadow-sm:   0 2px 8px  rgba(0,0,0,.25);
  --shadow-md:   0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.45);
  --shadow-glow-yellow: 0 8px 28px rgba(255,224,64,.3);
  --shadow-glow-pink:   0 8px 28px rgba(255,75,168,.3);
  --shadow-glow-green:  0 8px 28px rgba(125,218,62,.3);
  --shadow-glow-cyan:   0 8px 28px rgba(74,223,255,.3);

  /* ── ANIMATION DURATION ── */
  --dur-instant: 80ms;
  --dur-fast:    180ms;
  --dur-mid:     400ms;
  --dur-slow:    700ms;
  --dur-crawl:   1200ms;

  /* ── EASING ── */
  --ease-bounce:  cubic-bezier(.22, 1, .36, 1);
  --ease-spring:  cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth:  cubic-bezier(.4, 0, .2, 1);

  /* ── Z-INDEX SCALE ── */
  --z-bg:       0;
  --z-content:  4;
  --z-cloud:    3;
  --z-overlay:  2;
  --z-sticky:  50;
  --z-nav:    999;
  --z-modal: 1000;

  /* ── TOUCH TARGET (min 44px for children) ── */
  --touch-min: 44px;

  /* ── SECTION HEIGHTS ── */
  --nav-h-desktop: 110px;
  --nav-h-mobile:   70px;
}