/*
 * oop.fm brand tokens
 * 사용: <link rel="stylesheet" href="https://oop.fm/brand/brand.css">
 * 토큰만 정의하고 다른 요소 스타일은 건드리지 않는다.
 */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Inter:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* color — 브랜드 보드 팔레트에서 추출 */
  --oop-purple: #9867FD;
  --oop-lime: #DDFB6A;
  --oop-pink: #FEB2DD;
  --oop-ink: #0D0D0D;
  --oop-gray: #E7E5E1;
  --oop-paper: #F8F7F3;
  --oop-white: #FFFFFF;
  --oop-muted: #8A857D;

  /* type */
  --oop-font-display: 'Baloo 2', 'Pretendard Variable', system-ui, sans-serif;
  --oop-font-ui: Inter, 'Pretendard Variable', system-ui, -apple-system, sans-serif;
  --oop-font-ko: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --oop-tagline-tracking: 0.24em;

  /* shape */
  --oop-radius-sm: 10px;
  --oop-radius-md: 16px;
  --oop-radius-lg: 24px;
  --oop-radius-pill: 999px;

  /* motion — 말랑한 오버슈트 */
  --oop-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --oop-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}