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

  /* ==================== */
  /* Height */
  /* ==================== */
  --height-3xs: 1.8rem;
  --height-2xs: 2rem;
  --height-xs: 2.5rem;
  --height-sm: 3rem;
  --height-md: 4rem; 
  --height-lg: 5rem; 
  --height-xl: 5.6rem;

  /* ==================== */
  /* System States */
  /* ==================== */
  --state-error: var(--orange-900);   
  --state-success: var(--primary-600);

  /* ==================== */
  /* Page Specific */
  /* ==================== */
  /* Login Page Backgrounds */
  --login-bg-top: var(--primary-100);
  --login-bg-middle: var(--primary-50);
  --login-bg-bottom: var(--surface-50);

  /* Global Navigation Bar */
  --gnb-bg-active: var(--primary-50);

  /* Scrollbar */
  --scrollbar-thumb: var(--surface-300);
  --scrollbar-thumb-hover: var(--surface-400);
  --scrollbar-track: var(--surface-50);

  /* ==================== */
  /* Button Components */
  /* ==================== */
  /* Primary Button (브랜드 컬러) */
  --btn-primary-bg: var(--primary-300);
  --btn-primary-bg-hover: var(--primary-400);
  --btn-primary-bg-pressed: var(--primary-500);
  --btn-primary-text: var(--surface-900);

  /* Secondary Button (아웃라인 브랜드) */
  --btn-secondary-bg: var(--surface-200);
  --btn-secondary-bg-hover: var(--surface-300);
  --btn-secondary-bg-pressed: var(--surface-400);
  --btn-secondary-text: var(--surface-900);
  --btn-secondary-border: var(--surface-200);

  /* Tertiary Button (기본 아웃라인) */
  --btn-tertiary-bg: var(--primary-100);
  --btn-tertiary-bg-hover: var(--primary-200);
  --btn-tertiary-bg-pressed: var(--primary-300);
  --btn-tertiary-text: var(--surface-900);
  --btn-tertiary-border: var(--primary-100);

  /* Inverse Button (어두운 버튼) */
  --btn-inverse-bg: var(--surface-900);
  --btn-inverse-bg-hover: var(--surface-800);
  --btn-inverse-bg-pressed: var(--surface-700);
  --btn-inverse-text: var(--surface-50);

  /* Neutral Button (중성 버튼) */
  --btn-neutral-bg: var(--surface-400);
  --btn-neutral-bg-hover: var(--surface-500);
  --btn-neutral-bg-pressed: var(--surface-600);
  --btn-neutral-text: var(--surface-800);

  /* Subtle Button (연한 버튼) */
  --btn-subtle-bg: var(--wh);
  --btn-subtle-bg-hover: var(--surface-50);
  --btn-subtle-bg-pressed: var(--surface-100);
  --btn-subtle-text: var(--surface-800);
  --btn-subtle-border: var(--surface-300);

  /* Ghost Button (투명 배경) */
  --btn-ghost-text: var(--surface-600);
  --btn-ghost-text-hover: var(--primary-600);
  --btn-ghost-text-pressed: var(--primary-700);
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: transparent;

  /* Link Button (링크 스타일) */
  --btn-link-text: var(--primary-500);
  --btn-link-visited-text: var(--surface-700);
  --btn-link-text-hover: var(--primary-600);
  --btn-link-text-pressed: var(--primary-700);
  --btn-link-bg: transparent;
  --btn-link-bg-hover: transparent;

  /* ==================== */
  /* Table Component */
  /* ==================== */
  --table-bg: var(--wh);
  --table-bg-header: var(--surface-50);
  --table-text: var(--surface-700);
  --table-bg-hover: var(--primary-50);
  --table-text-hover: var(--primary-600);
  --table-border: var(--surface-100);
  --table-border-top: var(--surface-900);

  /* Table Spacing */
  --table-spacing-sm: 0.375rem; /* 6px */
  --table-spacing-md: 0.5rem; /* 8px */
  --table-spacing: 0.44rem; /* 7px */


  /* ==================== */
  /* Tab Component */
  /* ==================== */
  /* 공통 */
  --tab-bg: var(--bg-default);
  --tab-text: var(--text-secondary);
  --tab-text-active: var(--text-primary);

  /* Line 스타일 (하단 라인) */
  --tab-line-border: var(--border-secondary);
  --tab-line-border-active: var(--border-brand);

  /* Scroll 스타일 */
  --tab-scroll-border: var(--border-primary);
  --tab-scroll-text-active: var(--text-brand);

  /* Fill 스타일 (배경 채움) */
  --tab-fill-bg: var(--bg-secondary);
  --tab-fill-bg-active: var(--bg-brand);
  --tab-fill-text-active: var(--text-inverse);

  /* Pill 스타일 (알약형) */
  --tab-pill-border: var(--border-primary);
  --tab-pill-bg: var(--bg-default);
  --tab-pill-bg-active: var(--surface-900);
  --tab-pill-text-active: var(--wh);


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

  --input-message: var(--surface-600);
  --input-message-error: var(--red-600);
  --input-message-success: var(--green-700);

  /* Checkbox */
  --checkbox-bg: var(--wh);
  --checkbox-border: var(--surface-300);
  --checkbox-bg-checked: var(--primary-500);
  --checkbox-border-checked: var(--primary-500);

  /* Radio Button */
  --radio-bg: var(--surface-100);
  --radio-border: var(--surface-400);
  --radio-bg-checked: var(--primary-100);      
  --radio-icon: var(--surface-500);      
  --radio-icon-checked: var(--primary-500);      
  --radio-border-checked: var(--primary-500);  

  /* Switch Toggle */
  --switch-bg: var(--surface-400);          
  --switch-bg-checked: var(--primary-600);       
  --switch-thumb: var(--wh);                    

  /* Chip (Box Checkbox & Radio) */
  --chip-bg: var(--wh);                 
  --chip-border: var(--surface-300);    
  --chip-text: var(--surface-800);      
  --chip-bg-hover: var(--primary-50);      
  --chip-border-hover: var(--primary-200); 
  --chip-text-hover: var(--primary-600); 
  --chip-bg-checked: var(--primary-100);
  --chip-border-checked: var(--primary-100);

  /* ==================== */
  /* State: Disabled */
  /* ==================== */
  --disabled-bg: var(--surface-300);
  --disabled-text: var(--surface-500);
  --disabled-border: var(--surface-300);

  /* ==================== */
  /* tooltip              */
  /* ==================== */
  --tooltip-icon: var(--surface-400);
  --tooltip-icon-hover: var(--primary-500);
  --tooltip-bg: var(--wh);
  --tooltip-text: var(--primary-600);
  --tooltip-border: var(--primary-300);


  /* ==================== */
  /* Spinner / Loading */
  /* ==================== */
  --spinner-bg: var(--surface-300);
  --spinner-brand-bg: var(--primary-500);

  /* ==================== */
  /* Badge Component */
  /* ==================== */
  /* Primary (Brand) */
  --badge-primary-solid: var(--bg-brand);
  --badge-primary-solid-text: var(--text-inverse);
  --badge-primary-outline: var(--border-brand);
  --badge-primary-outline-bg: var(--bg-brand-subtle);
  --badge-primary-outline-text: var(--text-brand-strong);
  --badge-primary-pastel: var(--bg-brand-subtle);
  --badge-primary-pastel-text: var(--text-brand-strong);

  /* Gray (Tertiary) */
  --badge-gray-solid: var(--surface-500);
  --badge-gray-solid-text: var(--text-inverse);
  --badge-gray-outline: var(--border-tertiary);
  --badge-gray-outline-bg: var(--surface-50);
  --badge-gray-outline-text: var(--text-secondary);
  --badge-gray-pastel: var(--surface-100);
  --badge-gray-pastel-text: var(--text-secondary);

  /* Red (Danger) */
  --badge-red-solid: var(--bg-danger);
  --badge-red-solid-text: var(--text-inverse);
  --badge-red-outline: var(--border-danger);
  --badge-red-outline-bg: var(--bg-danger-subtle);
  --badge-red-outline-text: var(--text-danger);
  --badge-red-pastel: var(--bg-danger-subtle);
  --badge-red-pastel-text: var(--text-danger);

  /* Yellow (Warning) */
  --badge-yellow-solid: var(--bg-warning);
  --badge-yellow-solid-text: var(--text-primary);
  --badge-yellow-outline: var(--border-warning);
  --badge-yellow-outline-bg: var(--bg-warning-subtle);
  --badge-yellow-outline-text: var(--text-warning);
  --badge-yellow-pastel: var(--bg-warning-subtle);
  --badge-yellow-pastel-text: var(--text-warning);

  /* Green (Success) */
  --badge-green-solid: var(--bg-success);
  --badge-green-solid-text: var(--text-inverse);
  --badge-green-outline: var(--border-success);
  --badge-green-outline-bg: var(--bg-success-subtle);
  --badge-green-outline-text: var(--text-success);
  --badge-green-pastel: var(--bg-success-subtle);
  --badge-green-pastel-text: var(--text-success);

  /* Blue (Information) */
  --badge-blue-solid: var(--bg-information);
  --badge-blue-solid-text: var(--text-inverse);
  --badge-blue-outline: var(--border-information);
  --badge-blue-outline-bg: var(--bg-information-subtle);
  --badge-blue-outline-text: var(--text-information);
  --badge-blue-pastel: var(--bg-information-subtle);
  --badge-blue-pastel-text: var(--text-information);

  --tag-bg: var(--wh);
  --tag-text: var(--surface-700);
  --tag-border: var(--surface-200);
  --tag-bg-hover: var(--surface-50);
  --tag-bg-active: var(--surface-100);

}