/* 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-bold: 700;

  /* Header Font Sizes (Bold) */
  --font-h1: 3.75rem; /* 60px / 16 = 3.75 */
  --font-h2: 2.5rem; /* 40px / 16 = 2.5 */
  --font-h3: 2rem; /* 32px / 16 = 2 */
  --font-h4: 1.5rem; /* 24px / 16 = 1.5 */

  --font-h50: 3.125rem; /*50px*/

  /* Body Font Sizes (Regular) */
  --font-b1: 1.25rem; /* 20px */
  --font-b2: 1.125rem; /* 18px / 16 = 1.125 */
  --font-b3: 1rem; /* 16px / 16 = 1 (body 기본 크기) */
  --font-b4: 0.875rem; /* 14px / 16 = 0.875 */
  --font-b5: 0.75rem; /* 12px / 16 = 0.75 */

  --font-b15: 0.9375rem; /* 15px / 16 = 0.9375 */

  /* 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;
}