/* 변수 */
:root {
  /* 1. Primitive (실제 색상 코드) */
  /* white */
  --white-100: #FFFFFF;
  --white-200: #F1FAFF;
  
  /* gray */
  --gray-100: #ABB2C5;
  --gray-200: #7a7f8d;
  --gray-300: #434959;
  --gray-400: #273240;
  /*--gray-500: #2C2F34;
  --gray-600: #202328;*/
  
  --dark-100: #1F2939;
  --dark-200: #17212D;
  --dark-300: #0D1623;
  
  --black: #000000;
  --red: #FF2115;
  --red-rgb: 255 33 21;  /* 투명도 용도 */
  --yellow: #FFAA24;
  --yellow-rgb: 255 170 36;

  --green-100: #1BDD61;
  --green-100-rgb: 27 221 97;
  --green-200: #008831;
  --green-300: #0E592A;

  --primary-accent: #2060F4;
  
  --primary-brand-100: #acc5ff; /* Light++ */
  --primary-brand-200: #4f85ff; /* Light+ */
  --primary-brand-400: #103ea5; /* Dark- */
  --primary-brand-600: #0b2b75; /* Dark+ */
  --primary-brand-800: #081e50; /* Dark++ */
  --primary-brand-900: #1f2125;

  /* 2. Semantic (역할) */
  --color-positive: var(--green-100);     /* 정상 */  
  --color-positive-rgb-bg: rgb(var(--green-100-rgb) / 0.2);
  --color-caution: var(--yellow);         /* 주의 */
  --color-warning: var(--yellow);         /* 경고 */
  --color-warning-rgb-bg: rgb(var(--yellow-rgb) / 0.2);
  --color-error: var(--red);              /* 오류, 장애 */
  --color-error-rgb-bg: rgb(var(--red-rgb) / 0.2);
  
  --color-unused: var(--gray-100);     /* 미사용 */  
  --color-unused-bg: var(--gray-300);
  
  --color-normal: var(--primary-accent);     /* 정상 */  
  --color-normal-text: var(--primary-brand-100);  
  --color-normal-bg: var(--primary-brand-800);
  
  --color-pending: var(--yellow);         /* 대기 */
  --color-pending-rgb-bg: rgb(var(--yellow-rgb) / 0.2);
  
  --color-operating: var(--green-100);    /* 작동중 */
  --color-increase: var(--green-100);     /* 증가 */
  --color-decrease: var(--red);           /* 감소 */
  --color-border: var(--gray-400);        /* 테두리 */
  --color-border-active: var(--primary-accent);        /* 테두리 */
  --color-text-primary: var(--white-200);

  /* 컬러 순서 */
  --color-primary: var(--primary-accent);
  --color-secondary: var(--green-200);
  --color-tertiary: var(--gray-300);

  /* 입력/셀렉트 */
  --input-text: var(--gray-100);
  --input-text-error: var(--red);
  --input-text-disabled: var(--gray-300);
  --input-bg: var(--dark-200);
  --input-bg-error: rgb(var(--red-rgb) / 0.2);
  --input-bg-disabled: var(--gray-600);
  --input-bg-fill: var(--primary-brand-800);
  --input-border: var(--gray-100);
  --input-border-hover: var(--primary-accent);
  --input-border-focus: var(--primary-accent);
  --input-border-error: var(--red);
  --input-border-disabled: var(--gray-400);
  --color-select-bg-hover: var(--primary-brand-400);

  /* 버튼 */
  --button-primary-bg: var(--primary-accent);
  --button-primary-bg-hover: var(--primary-brand-400);
  --button-primary-border: var(--primary-brand-200);
  
  --button-secondary-bg: var(--primary-brand-600);
  --button-secondary-bg-hover: var(--primary-brand-400);
  --button-secondary-border: var(--primary-accent);
  
  --button-tertiary-bg: var(--gray-300);
  --button-tertiary-bg-hover: var(--gray-200);
  --button-tertiary-border: var(--gray-200);
  
  --button-disabled-bg: var(--primary-brand-800);
  --button-disabled-text: var(--gray-400);

  /* 백그라운드 */
  --color-bg-body: var(--dark-300);
  --color-bg-active: var(--primary-brand-800);

  /* 텍스트 */
  --color-text: var();
  
  /* 구분선 */
  --color-divider: var(--gray-100);

  /* 다이어로그 */
  --color-dialog-bg: var(--white-200);
  --color-dialog-text: var(--primary-brand-900);
  --color-dialog-border: var();

  /* 폰트 사이즈 */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-md-lg: 1.125rem; /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
  --font-size-3xl: 2.5rem;     /* 40px */
  --font-size-4xl: 3rem;       /* 48px */
  --font-size-5xl: 4rem;       /* 64px */

  /*요소간 간격 gap*/
  --gap-xxs: 4px;
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;
}