/**
 * NextBio Website - Design System
 * 색상, 타이포그래피, 간격 등 디자인 토큰 정의
 */

:root {
  /* ============================================
     Colors
     ============================================ */
  --color-main: #8dc63f;
  --color-point-01: #f5821f;
  --color-point-02: #00aeef;
  --color-gray-01: #808284;
  --color-gray-02: #dfdfdf;
  --color-sub: #f4faec;
  --color-555: #555555;
  --color-000: #000000;
  --color-fff: #ffffff;

  /* 색상 별칭 (더 직관적인 이름) */
  --color-primary: var(--color-main);
  --color-accent: var(--color-point-01);
  --color-accent-secondary: var(--color-point-02);
  --color-text: var(--color-000);
  --color-text-secondary: var(--color-555);
  --color-text-tertiary: var(--color-gray-01);
  --color-border: var(--color-gray-02);
  --color-background: var(--color-fff);
  --color-background-sub: var(--color-sub);

  /* ============================================
     Typography - Font Families
     ============================================ */
  --font-family-suit: 'SUIT', 'Suit', sans-serif;
  
  /* 폰트 웨이트 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ============================================
     Typography - Title Styles
     ============================================ */
  /* Title 48 */
  --title-48-font-family: var(--font-family-suit);
  --title-48-font-size: 48px;
  --title-48-line-height: 60px;
  --title-48-font-weight: var(--font-weight-extrabold);
  
  /* Title 32 */
  --title-32-font-family: var(--font-family-suit);
  --title-32-font-size: 32px;
  --title-32-line-height: 40px;
  --title-32-font-weight: var(--font-weight-bold);

  /* ============================================
     Typography - Paragraph Styles
     ============================================ */
  /* Paragraph 24 Bold */
  --p-24-font-family: var(--font-family-suit);
  --p-24-font-size: 24px;
  --p-24-line-height: 32px;
  --p-24-font-weight: var(--font-weight-bold);
  
  /* Paragraph 24 Medium */
  --p-24-m-font-family: var(--font-family-suit);
  --p-24-m-font-size: 24px;
  --p-24-m-line-height: 36px;
  --p-24-m-font-weight: var(--font-weight-medium);
  
  /* Paragraph 20 SemiBold */
  --p-20-sb-font-family: var(--font-family-suit);
  --p-20-sb-font-size: 20px;
  --p-20-sb-line-height: 30px;
  --p-20-sb-font-weight: var(--font-weight-semibold);
  
  /* Paragraph 20 Regular */
  --p-20-r-font-family: var(--font-family-suit);
  --p-20-r-font-size: 20px;
  --p-20-r-line-height: 30px;
  --p-20-r-font-weight: var(--font-weight-regular);
  
  /* Paragraph 18 SemiBold */
  --p-18-sb-font-family: var(--font-family-suit);
  --p-18-sb-font-size: 18px;
  --p-18-sb-line-height: 26px;
  --p-18-sb-font-weight: var(--font-weight-semibold);
  
  /* Paragraph 18 Regular */
  --p-18-r-font-family: var(--font-family-suit);
  --p-18-r-font-size: 18px;
  --p-18-r-line-height: 26px;
  --p-18-r-font-weight: var(--font-weight-regular);
  
  /* Paragraph 16 SemiBold */
  --p-16-sb-font-family: var(--font-family-suit);
  --p-16-sb-font-size: 16px;
  --p-16-sb-line-height: 24px;
  --p-16-sb-font-weight: var(--font-weight-semibold);
  
  /* Paragraph 16 Regular */
  --p-16-r-font-family: var(--font-family-suit);
  --p-16-r-font-size: 16px;
  --p-16-r-line-height: 24px;
  --p-16-r-font-weight: var(--font-weight-regular);
  
  /* Paragraph 14 Medium */
  --p-14-m-font-family: var(--font-family-suit);
  --p-14-m-font-size: 14px;
  --p-14-m-line-height: 20px;
  --p-14-m-font-weight: var(--font-weight-medium);

  /* ============================================
     Spacing
     ============================================ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ============================================
     Border Radius
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ============================================
     Shadows
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* ============================================
     Transitions
     ============================================ */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ============================================
   Typography Utility Classes
   ============================================ */

/* Title Styles */
.title-48 {
  font-family: var(--title-48-font-family);
  font-size: var(--title-48-font-size);
  line-height: var(--title-48-line-height);
  font-weight: var(--title-48-font-weight);
}

.title-32 {
  font-family: var(--title-32-font-family);
  font-size: var(--title-32-font-size);
  line-height: var(--title-32-line-height);
  font-weight: var(--title-32-font-weight);
}

/* Paragraph Styles */
.p-24 {
  font-family: var(--p-24-font-family);
  font-size: var(--p-24-font-size);
  line-height: var(--p-24-line-height);
  font-weight: var(--p-24-font-weight);
}

.p-24-m {
  font-family: var(--p-24-m-font-family);
  font-size: var(--p-24-m-font-size);
  line-height: var(--p-24-m-line-height);
  font-weight: var(--p-24-m-font-weight);
}

.p-20-sb {
  font-family: var(--p-20-sb-font-family);
  font-size: var(--p-20-sb-font-size);
  line-height: var(--p-20-sb-line-height);
  font-weight: var(--p-20-sb-font-weight);
}

.p-20-r {
  font-family: var(--p-20-r-font-family);
  font-size: var(--p-20-r-font-size);
  line-height: var(--p-20-r-line-height);
  font-weight: var(--p-20-r-font-weight);
}

.p-18-sb {
  font-family: var(--p-18-sb-font-family);
  font-size: var(--p-18-sb-font-size);
  line-height: var(--p-18-sb-line-height);
  font-weight: var(--p-18-sb-font-weight);
}

.p-18-r {
  font-family: var(--p-18-r-font-family);
  font-size: var(--p-18-r-font-size);
  line-height: var(--p-18-r-line-height);
  font-weight: var(--p-18-r-font-weight);
}

.p-16-sb {
  font-family: var(--p-16-sb-font-family);
  font-size: var(--p-16-sb-font-size);
  line-height: var(--p-16-sb-line-height);
  font-weight: var(--p-16-sb-font-weight);
}

.p-16-r {
  font-family: var(--p-16-r-font-family);
  font-size: var(--p-16-r-font-size);
  line-height: var(--p-16-r-line-height);
  font-weight: var(--p-16-r-font-weight);
}

.p-14-m {
  font-family: var(--p-14-m-font-family);
  font-size: var(--p-14-m-font-size);
  line-height: var(--p-14-m-line-height);
  font-weight: var(--p-14-m-font-weight);
}

/* ============================================
   Responsive Typography
   ============================================ */
@media (max-width: 768px) {
  :root {
    --title-48-font-size: 36px;
    --title-48-line-height: 48px;
    --title-32-font-size: 28px;
    --title-32-line-height: 36px;
    --p-24-font-size: 20px;
    --p-24-line-height: 28px;
    --p-24-m-font-size: 20px;
    --p-24-m-line-height: 32px;
    --p-20-sb-font-size: 18px;
    --p-20-sb-line-height: 28px;
    --p-20-r-font-size: 18px;
    --p-20-r-line-height: 28px;
  }
}