@charset "UTF-8";
:root{
  --font-family: 'Pretendard Variable',sans-serif;

  /* system color */
  --error: var(--orange-900);
  --success: var(--primary-700);

  /* login bg */
  --login-top-bg: var(--primary-200);
  --login-middle-bg: var(--primary-100);
  --login-bottom-bg: var(--surface-50);

  /* gnb bg */
  --gnb-active-bg: var(--primary-100);

  /* scroll bar */
  --scroll-bar: var(--surface-300); 
  --scroll-bar-hover: var(--surface-400); 
  --scroll-bar-bg: var(--surface-100); 

  /* section  여백 */
  --grid-primary: 0.876em;
  --grid-secondary: 1.87em;
  --grid-tertiary: 1.5em;

  /* step */
  --step-surface: var(--surface-400);
  --step-active: var(--primary-400);

  /* 여백 */
  --space-4xs: 0.125em; /* 2px */
  --space-3xs: 0.25em; /* 4px */
  --space-2xs: 0.375em; /* 6px */
  --space-xs: 0.5em; /* 8px */
  --space-sm: 0.625em; /* 10px */
  --space-md: 0.75em; /* 12px */
  --space-lg: 0.875em; /* 14px */
  --space-xl: 1em; /* 16px */
  --space-2xl: 1.25em; /* 20px */
  --space-3xl: 1.5em; /* 24px */
  --space-4xl: 2em; /* 32px */

  /* ==================== */
  /* Button Components    */
  /* ==================== */
  --btn-primary-bg: var(--primary-500);
  --btn-primary-bg-hover: var(--primary-600);
  --btn-primary-text: var(--primary-100);

  --btn-secondary-bg: var(--primary-300);
  --btn-secondary-bg-hover: var(--primary-400);
  --btn-secondary-text: var(--surface-800);

  --btn-tertiary-bg: var(--secondary-900);
  --btn-tertiary-bg-hover: var(--secondary-800);
  --btn-tertiary-text: var(--surface-100);

  --btn-neutral-bg: var(--surface-400);
  --btn-neutral-bg-hover: var(--primary-300);
  --btn-neutral-text: var(--surface-800);

  --btn-subtle-bg: var(--surface-100);
  --btn-subtle-text: var(--surface-700);
  --btn-subtle-hover-text: var(--primary-700);
  
  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--surface-800);
  --btn-ghost-text-hover: var(--secondary-900);

  --btn-link-bg: transparent;
  --btn-link-text: var(--surface-800);
  --btn-link-text-hover: var(--primary-700);


  /* table */
  --table-surface: var(--wh);
  --table-bg-primary: var(--surface-100);
  --table-hover-bg: var(--primary-100);
  --table-hover-color: var(--primary-600);
  --table-border:var(--surface-200);
  --table-space-sm: 0.375em; 
  --table-space-md: 0.5em; 
  --table-space: 0.44em;

  /* tab */
  --tab-base: var(--surface-700);
  --tab-active: var(--primary-400);
  --tab-text-active: var(--primary-700);
  --tab-primary: var(--wh);
  --tab-secondary: var(--primary-200);
  --tab-tertiary: var(--secondary-900);

  /* ==================== */
  /* form Components     */
  /* ==================== */
  --input-bg: var(--wh);
  --input-text: var(--surface-800);
  --input-border: var(--surface-600);
  --input-border-focus: var(--primary-400);
  --input-placeholder: var(--surface-700);
  --input-label: var(--surface-800);

  --input-secondary-border: var(--primary-400);
  --input-secondary-border-focus: var(--primary-600);

  --sch-input-bg: var(--surface-100);
  --sch-input-border: var(--surface-500);
  --sch-input-bg-focus: var(--primary-100);
  --sch-input-border-focus: var(--primary-300);

  --file-input-bg: var(--surface-200);
  --file-input-empty: var(--surface-600);

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

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

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

  /* Chip (Box Checkbox & Radio) */
  --chip-bg: var(--secondary-100);
  --chip-bg-pill: var(--wh);
  --chip-text: var(--surface-800);
  --chip-checked-bg: var(--secondary-900);
  --chip-checked-text: var(--surface-100);

  --chip-secondary-bg: var(--wh);
  --chip-secondary-text: var(--surface-700);
  --chip-secondary-border: var(--surface-500);
  --chip-secondary-checked-bg: var(--secondary-900);
  --chip-secondary-checked-border: var(--secondary-900);
  --chip-secondary-checked-text: var(--surface-100);
  
  --chip-tertiary-bg: var(--surface-100);
  --chip-tertiary-text: var(--surface-800);
  --chip-tertiary-border: var(--surface-400);
  --chip-tertiary-checked-bg: var(--primary-200);
  --chip-tertiary-checked-border: var(--primary-400);
  --chip-tertiary-checked-text: var(--surface-900);
  --chip-tertiary-checked-text-opacity: rgba(17,17,17,0.4);

  --chip-subtle-bg: var(--surface-100);
  --chip-subtle-text: var(--surface-800);
  --chip-subtle-checked-bg: var(--primary-200);

  --chip-ghost-bg: transparent;
  --chip-ghost-border: transparent;
  --chip-ghost-text: var(--surface-800);
  --chip-ghost-checked-bg: var(--primary-200);
  --chip-ghost-checked-text: var(--primary-700);

  /* badge */
  --badge-text: var(--surface-800);
  /* --badge-neutral: var(--surface-400);
  --badge-warning: var(--orange-300);
  --badge-info: var(--blue-300); */

  --badge-success: var(--primary-300);
  --badge-pending: var(--surface-400);
  --badge-processing: var(--indigo-200);
  --badge-error: var(--orange-300);
  --badge-neutral: var(--surface-400);


  /* Disabled State */
  --disabled-bg: var(--secondary-100);
  --disabled-text: var(--surface-800);
  --disabled-border: var(--secondary-200);

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

  /* Height 변수 */
  --page-header-height: 3em; 
  --height-input-sm: 2em;
  --height-input-md: 2.5em;
  --height-input-lg: 2.8em;
  
}