:root{
  --font-family: 'Pretendard',sans-serif;

  /* ==================== */
  /* Height */
  /* ==================== */
  --height-xs: 1.5rem; /* 24px */
  --height-sm: 3rem; /* 37px */
  --height-md: 2.5rem;  /* 40px */
  --height-lg: 3rem; /* 48px*/
  --height-xl: 3.375rem; /* 54px*/ 
  --height-2xl: 3.5rem; /* 56px*/

  /* ==================== */
  /* Button Components */
  /* ==================== */
  /* Primary Button (브랜드 컬러)  */
  --btn-primary-bg: var(--primary-500);
  --btn-primary-bg-hover: var(--primary-600);
  --btn-primary-bg-pressed: var(--primary-700);
  --btn-primary-text: var(--wh);

  /* Secondary Button (연오랜지 — 소프트 브랜드) */
  --btn-secondary-bg: var(--primary-50);
  --btn-secondary-bg-hover: var(--primary-50);
  --btn-secondary-bg-pressed: var(--primary-50);
  --btn-secondary-text: var(--primary-500);
  --btn-secondary-border: var(--primary-50);

  /* Tertiary Button (화이트 02 — 기본 아웃라인) */
  --btn-tertiary-bg: var(--surface-0);
  --btn-tertiary-bg-hover: var(--surface-100);
  --btn-tertiary-bg-pressed: var(--surface-200);
  --btn-tertiary-text: var(--surface-950);
  --btn-tertiary-border: var(--surface-200);

  /* Inverse Button (블랙 — 어두운 버튼) */
  --btn-inverse-bg: var(--surface-1000);
  --btn-inverse-bg-hover: var(--surface-900);
  --btn-inverse-bg-pressed: var(--surface-800);
  --btn-inverse-text: var(--surface-0);

  /* Neutral Button (블랙 반투명 — 오버레이) */
  --btn-neutral-bg: rgba(0,0,0,0.5);
  --btn-neutral-bg-hover: rgba(0,0,0,0.65);
  --btn-neutral-text: var(--wh);

  /* Subtle Button (그레이 — 연한 버튼) */
  --btn-subtle-bg: var(--surface-200);
  --btn-subtle-bg-hover: var(--surface-300);
  --btn-subtle-bg-pressed: var(--surface-300);
  --btn-subtle-text: var(--surface-600);
  --btn-subtle-border: var(--surface-200);

  /* Ghost Button (텍스트 — 투명 배경) */
  --btn-ghost-text: var(--surface-950);
  --btn-ghost-text-hover: var(--primary-500);
  --btn-ghost-text-pressed: var(--primary-600);
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: transparent;

  /* CTA Button (흰 배경 + 브랜드 텍스트 — filled pill) */
  --btn-cta-bg: var(--wh);
  --btn-cta-bg-hover: var(--primary-50);
  --btn-cta-text: var(--primary-500);
  --btn-cta-text-hover: var(--primary-600);
  --btn-cta-text-pressed: var(--primary-700);


  /* ==================== */
  /* Tab Component */
  /* ==================== */
  /* 공통 (Ghost 버튼과 동일 조합: 기본 #121212 → 활성 #FB4007) */
  --tab-text: var(--surface-950);
  --tab-text-active: var(--primary-500);
  --tab-bg: var(--bg-default);
  --tab-text-hover: var(--text-brand);

  /* Line 스타일 (밑줄) */
  --tab-line-min-width: 5rem;
  --tab-line-border: transparent;
  --tab-line-border-active: var(--primary-500);

  /* ==================== */
  /* Form Components */
  /* ==================== */
  /* Input Field */
  --input-bg: var(--surface-0);
  --input-text: var(--surface-600);
  --input-border: var(--surface-300);
  --input-border-focus: var(--primary-500);
  --input-placeholder: var(--surface-600);
  --input-label: var(--surface-700);
  --input-hint: var(--surface-500);

  --tag-bg: var(--surface-0);
  --tag-text: var(--surface-900);
  --tag-border: var(--surface-300);

}

/* ==================== */
/* 반응형 높이 */
/* ==================== */
@media (max-width: 1024px) {
  :root {
    --height-xs: 2rem;
  }
}