/* =========================================================================
   Syrup 미니게임 — 디자인 토큰
   출처: Figma "Syrup_Design-System" (KiAKYEpdiOFwGzFUrqfW77) Foundation 페이지 변수
         + "Syrup_App" 모으기 화면(1:1535) 변수
   이름 규칙: Figma 변수 이름을 그대로 옮김
     Color/Primary_Orange   → --color-primary-orange
     Spacing/400            → --space-400
     Corner radius/250      → --radius-250
     Font size/6            → --font-size-6
   맨 아래 "임시 값" 블록은 Figma에 없는 값이에요. (DESIGN.md 참고)
   ========================================================================= */

:root {
  /* ---------- Color / Brand ---------- */
  --color-primary-orange: #ff6315;
  --color-secondary-yellow: #ffbe3b;
  --color-secondary-coral: #ff9550;
  --color-secondary-blue: #3496f4;
  --color-secondary-red: #ff3e00;
  --color-secondary-brown-gray: #5e5854;
  --color-third-pastel-yellow: #fff9e2;
  --color-third-pastel-blue: #f1f6ff;
  --color-third-pastel-coral: #ffeade;

  /* ---------- Color / Gray ---------- */
  --color-gray-black: #000000;
  --color-gray-100: #222222;
  --color-gray-200: #464646;
  --color-gray-250: #555555;
  --color-gray-300: #666666;
  --color-gray-400: #777777;
  --color-gray-500: #999999;
  --color-gray-600: #bbbbbb;
  --color-gray-700: #d2d2d2;
  --color-gray-750: #dddddd;
  --color-gray-800: #e4e4e4;
  --color-gray-850: #ededed;
  --color-gray-900: #f2f2f2;
  --color-gray-950: #f6f6f7;
  --color-gray-1000: #fafafb;
  --color-gray-white: #ffffff;

  /* ---------- Color / Opacity ---------- */
  --color-opacity-black-100: rgba(0, 0, 0, 0.75); /* #000000bf — Dim */
  --color-opacity-black-200: rgba(0, 0, 0, 0.5);  /* #00000080 */
  --color-opacity-black-300: rgba(0, 0, 0, 0.25); /* #00000040 */
  --color-opacity-black-400: rgba(0, 0, 0, 0.12); /* #0000001f */
  --color-opacity-black-450: rgba(0, 0, 0, 0.08); /* #00000014 */
  --color-opacity-black-500: rgba(0, 0, 0, 0.04); /* #0000000a */

  /* Toast 배경 (Toast 컴포넌트 8502:10441 에 하드코딩된 값) */
  --color-toast-bg: rgba(34, 34, 34, 0.8);

  /* ---------- Font ---------- */
  --font-family-pretendard: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;

  --font-weight-400: 400; /* Regular */
  --font-weight-500: 500; /* Medium */
  --font-weight-600: 600; /* SemiBold */
  --font-weight-700: 700; /* Bold */
  --font-weight-800: 800; /* ExtraBold — Dialog/Image NEW 뱃지에서 사용 */
  --font-weight-900: 900; /* Black */

  --font-size-0: 11px;
  --font-size-1: 12px;
  --font-size-2: 13px;
  --font-size-3: 14px;
  --font-size-4: 15px;
  --font-size-5: 16px;
  --font-size-6: 17px;
  --font-size-7: 19px;
  --font-size-8: 20px;
  --font-size-9: 21px;
  --font-size-10: 23px;
  --font-size-12: 25px;
  --font-size-14: 28px;

  --line-height-0: 35px;
  --line-height-2: 31px;
  --line-height-4: 29px;
  --line-height-5: 27px;
  --line-height-13: 24px;
  --line-height-15: 22px;
  --line-height-17: 20px;
  --line-height-18: 19px;
  --line-height-19: 18px;
  --line-height-20: 17px;
  --line-height-21: 16px;

  --letter-spacing-0: -1px;
  --letter-spacing-1: -0.5px;
  --letter-spacing-2: -0.3px;
  --letter-spacing-3: 0px;
  --letter-spacing-4: -0.8px;
  --letter-spacing-5: -0.9px;

  /* ---------- Spacing ---------- */
  --space-0: 0px;
  --space-50: 2px;
  --space-100: 4px;
  --space-150: 6px;
  --space-200: 8px;
  --space-250: 10px;
  --space-300: 12px;
  --space-400: 16px;
  --space-500: 20px;
  --space-600: 24px;
  --space-700: 28px;
  --space-750: 30px;
  --space-800: 32px;
  --space-900: 36px;
  --space-1000: 40px;
  --space-1100: 44px;
  --space-1200: 48px;
  --space-1300: 52px;
  --space-1400: 56px;
  --space-1500: 60px;
  --space-1600: 64px;

  /* ---------- Corner radius ---------- */
  --radius-100: 4px;
  --radius-150: 6px;
  --radius-200: 8px;
  --radius-250: 10px;
  --radius-300: 12px;
  --radius-400: 16px;
  --radius-500: 20px;
  --radius-600: 24px;
  --radius-700: 28px;
  --radius-800: 32px;
  --radius-900: 36px;
  --radius-circle: 100px;

  /* ---------- Effect ---------- */
  --shadow-light-100: 0 1px 5px 0 var(--color-opacity-black-450);
  --shadow-gray-100: 0 0 4px 0 var(--color-opacity-black-500);
  --shadow-color-100: 0 0 2px 0 var(--color-opacity-black-500);

  /* =======================================================================
     임시 값 — Figma에 없어서 직접 정한 값 (DESIGN.md "피그마에 없어서 임시로 정한 값")
     ======================================================================= */
  --temp-stage-bg: #e9e7e4;            /* PC 바깥 배경 */
  --temp-stage-dot: rgba(94, 88, 84, 0.10); /* 바깥 배경 점무늬 */
  --temp-phone-bezel: var(--color-gray-100); /* 휴대폰 테두리 색 */
  --temp-phone-bezel-width: 10px;
  --temp-phone-radius: 44px;            /* 휴대폰 바깥 모서리 */
  --temp-screen-radius: 34px;           /* 화면 안쪽 모서리 */
  --temp-countdown-size: 88px;          /* 카운트다운 숫자 크기 */
  --temp-toast-bottom: 96px;            /* 토스트 위치 (화면 아래에서) */
  --temp-duration-fast: 160ms;          /* 버튼 눌림, 딤 */
  --temp-duration-base: 240ms;          /* 팝업, 토스트 등장 */
  --temp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --temp-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --temp-focus-ring: 0 0 0 3px rgba(255, 99, 21, 0.35);
}

/* =========================================================================
   텍스트 스타일 — Figma 텍스트 스타일 이름 그대로
   ========================================================================= */
.t100_28_bold    { font: var(--font-weight-700) var(--font-size-14)/var(--line-height-0) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-0); }
.t300_25_bold    { font: var(--font-weight-700) var(--font-size-12)/var(--line-height-2) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-1); }
.t500_23_bold    { font: var(--font-weight-700) var(--font-size-10)/var(--line-height-4) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-2); }
.t600_21_bold    { font: var(--font-weight-700) var(--font-size-9)/var(--line-height-5) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-2); }
.t700_19_bold    { font: var(--font-weight-700) var(--font-size-7)/var(--line-height-13) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-2); }
.t800_17_bold    { font: var(--font-weight-700) var(--font-size-6)/var(--line-height-15) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-3); }
.t900_16_bold    { font: var(--font-weight-700) var(--font-size-5)/var(--line-height-17) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-2); }
.t1000_15_bold   { font: var(--font-weight-700) var(--font-size-4)/var(--line-height-18) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-3); }
.t1050_14_bold   { font: var(--font-weight-700) var(--font-size-3)/var(--line-height-19) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-2); }
.t1060_13_bold   { font: var(--font-weight-700) var(--font-size-2)/var(--line-height-19) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-3); }
.t1100_17_medium { font: var(--font-weight-500) var(--font-size-6)/var(--line-height-15) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-4); }
.t1200_16_medium { font: var(--font-weight-500) var(--font-size-5)/var(--line-height-17) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-4); }
.t1300_15_medium { font: var(--font-weight-500) var(--font-size-4)/var(--line-height-18) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-1); }
.t1350_14_medium { font: var(--font-weight-500) var(--font-size-3)/var(--line-height-19) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-1); }
.t1360_13_medium { font: var(--font-weight-500) var(--font-size-2)/var(--line-height-19) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-3); }
.t1400_20_regular{ font: var(--font-weight-400) var(--font-size-8)/var(--line-height-13) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-4); }
.b100_17_regular { font: var(--font-weight-400) var(--font-size-6)/var(--line-height-15) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-5); }
.b200_16_regular { font: var(--font-weight-400) var(--font-size-5)/var(--line-height-17) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-4); }
.b300_15_regular { font: var(--font-weight-400) var(--font-size-4)/var(--line-height-18) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-1); }
.b400_14_regular { font: var(--font-weight-400) var(--font-size-3)/var(--line-height-19) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-1); }
.b500_13_regular { font: var(--font-weight-400) var(--font-size-2)/var(--line-height-19) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-3); }
.c100_12_regular { font: var(--font-weight-400) var(--font-size-1)/var(--line-height-20) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-1); }
.c200_11_regular { font: var(--font-weight-400) var(--font-size-0)/var(--line-height-21) var(--font-family-pretendard); letter-spacing: var(--letter-spacing-2); }