/* variables */
:root {
  /* Brand Colors */
  --color-primary: #516cdd;
  --color-primary-hover: #4059C3;
  --color-secondary-pink: #ff2e98;
  --color-secondary-navy: #1b1f58;
  --color-black: #000;
  --color-white: #fff;

  /* State Colors */
  --color-info: #516cdd;
  --color-success: #27ae60;
  --color-warning: #fec412;
  --color-error: #eb5757;

  /* Font Colors */
  --color-font-01: #1a1a1a;
  --color-font-02: #666666;
  --color-font-03: #999999;
  --color-font-disable: #b6c0c5;
  --color-font-disable-tab: #9fa6c5;

  /* Grey Colors */
  --color-gray-01: #ececec;
  --color-gray-02: #e0e0e0;
  --color-gray-03: #b9b8bd;
  --color-gray-04: #747579;
  --color-gray-05: #3c3c3c;
  --color-gray-06: #262626;

  /* Background Colors */
  --color-bg-01: #f7f7f7;
  --color-bg-02: #f5f7ff;
  --color-bg-disable: #f3f5f6;
  --color-line-ccc: #ccc;
  --color-line-ddd: #ddd;

  /* Font Family */
  --font-family: 'Pretendard';

  /* Font Weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;

  /* etc */
  --border-radius-small: 4px;
  --border-radius-medium: 6px;
  --border-radius-large: 12px;
  --border-radius-xlarge: 20px;
  --box-shadow-small: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  --box-shadow-large: 0px 6px 18px 0px rgba(0, 0, 0, 0.12);
  --box-shadow-xlarge: 0px 12px 32px 0px rgba(0, 0, 0, 0.16);

  --transition-basic: all 0.3s;
  --gnb-height: 80px;
}