/* CSS Variables */
:root {
  /* ===== Brand Colors ===== */
  --brand-primary: #ffd600;
  --brand-secondary: #f4bb00;
  --brand-tertiary: #2ca6e0;

  /* ===== System Colors ===== */
  --warning: #f11d1d;
  --success: #4cc297;

  /* ===== Grayscale ===== */
  --black: #000000;
  --gray-750: #383838;
  --gray-550: #777777;
  --gray-250: #efefef;

  /* ===== Typography ===== */
  /* Font Family */
  --font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
    "Malgun Gothic", sans-serif;

  /* Font Weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Header Font Sizes (Bold) */
  --font-h1: 64px;
  --font-h2: 56px;
  --font-h3: 50px;
  --font-h4: 44px;
  --font-h5: 36px;

  --font-title: 32px;

  /* Body Font Sizes (Regular) */
  --font-b1: 24px;
  --font-b2: 20px;
  --font-b3: 18px;
  --font-b4: 16px;
  --font-b5: 14px;

  --font-caption: 12px;

  --font-40: 40px;
  --font-15: 15px;
  --font-11: 11px;

  /* Letter Spacing */
  --letter-spacing-ko: -0.7px; /* 한글 */
  --letter-spacing-en: 0px; /* 영문 */

  /* Line Height */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ===== Shadow ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);

  /* ===== Transition ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* ===== Breakpoints ===== */
  /* 미디어쿼리에서 직접 사용 (CSS 변수는 미디어쿼리에 사용 불가) */

  /* ===== Container Max Width ===== */
  --container-desktop: 1280px;
  --container-tablet: 800px;
  --container-mobile: 341px;
}