/* ============================================================================
   Frontend Base Tokens - FPCOM 프론트엔드 디자인 토큰
   ============================================================================ */

:root {
  /* ===== 폰트 크기 ===== */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg: 1.125rem;     /* 18px */
  --fs-xl: 1.25rem;      /* 20px */
  --fs-2xl: 1.5rem;      /* 24px */
  --fs-3xl: 1.875rem;    /* 30px */
  --fs-4xl: 2.25rem;     /* 36px */

  /* ===== 폰트 굵기 ===== */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ===== 줄 간격 ===== */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ===== 색상: 배경/전경 ===== */
  --c-bg: #f8f9fa;
  --c-bg-secondary: #ffffff;
  --c-fg: #2d3748;
  --c-fg-secondary: #4a5568;
  --c-fg-tertiary: #718096;

  /* ===== 색상: 브랜드 (FPCOM) ===== */
  --c-brand: #667eea;
  --c-brand-hover: #764ba2;
  --c-brand-light: #f0f4ff;
  --c-brand-gradient-start: #667eea;
  --c-brand-gradient-end: #764ba2;

  /* ===== 색상: 상태 ===== */
  --c-success: #48bb78;
  --c-success-light: #c6f6d5;
  --c-warning: #f6ad55;
  --c-warning-light: #feebc8;
  --c-danger: #f56565;
  --c-danger-light: #fed7d7;
  --c-info: #4299e1;
  --c-info-light: #bee3f8;

  /* ===== 색상: 경계선 ===== */
  --c-border: #e2e8f0;
  --c-border-focus: var(--c-brand);

  /* ===== 네비게이션 ===== */
  --navbar-height: 70px;
  --navbar-bg: linear-gradient(135deg, var(--c-brand-gradient-start) 0%, var(--c-brand-gradient-end) 100%);
  --navbar-text: #ffffff;

  /* ===== 푸터 ===== */
  --footer-bg: #2d3748;
  --footer-text: #cbd5e0;

  /* ===== 카드 ===== */
  --card-bg: #ffffff;
  --card-border: var(--c-border);
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  --card-shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.1);

  /* ===== 버튼 ===== */
  --btn-primary-bg: linear-gradient(135deg, var(--c-brand-gradient-start) 0%, var(--c-brand-gradient-end) 100%);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);

  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: var(--c-brand);
  --btn-secondary-border: var(--c-brand);

  /* ===== 폼 컴포넌트 ===== */
  --input-bg: #ffffff;
  --input-border: var(--c-border);
  --input-focus-border: var(--c-brand);
  --input-focus-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  --input-height: 48px;
  --input-padding: 0.75rem 1rem;

  /* ===== 간격 ===== */
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ===== 테두리 반경 ===== */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 9999px;  /* 완전 원형 */

  /* ===== 그림자 ===== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

  /* ===== 애니메이션 ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== Z-Index ===== */
  --z-base: 0;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}