@font-face {
  font-family: "Pretendard";
  src: url("/Views/web/fonts/Pretendard-Thin.woff2") format("woff2");
  font-weight: 100;
}
@font-face {
  font-family: "Pretendard";
  src: url("/Views/web/fonts/Pretendard-ExtraLight.woff2") format("woff2");
  font-weight: 200;
}
@font-face {
  font-family: "Pretendard";
  src: url("/Views/web/fonts/Pretendard-Light.woff2") format("woff2");
  font-weight: 300;
}
@font-face {
  font-family: "Pretendard";
  src: url("/Views/web/fonts/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Pretendard";
  src: url("/Views/web/fonts/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "Pretendard";
  src: url("/Views/web/fonts/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
}
@font-face {
  font-family: "Pretendard";
  src: url("/Views/web/fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "Pretendard";
  src: url("/Views/web/fonts/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
}
@font-face {
  font-family: "Pretendard";
  src: url("/Views/web/fonts/Pretendard-Black.woff2") format("woff2");
  font-weight: 900;
}

:root {
  /* Brand */
  --color-brand-50: #f4f8fe;
  --color-brand-100: #e7f0fc;
  --color-brand-200: #c7dcf7;
  --color-brand-300: #99bdea;
  --color-brand-400: #6799d9;
  --color-brand-500: #4177c4;
  --color-brand-600: #285eaf;
  --color-brand-700: #14479a;
  --color-brand-800: #073490;
  --color-brand-900: #04276e;

  /* Brand Secondary */
  --color-brandSecondary-50: #e3f6ff;
  --color-brandSecondary-100: #b8e7ff;
  --color-brandSecondary-200: #8ad8ff;
  --color-brandSecondary-300: #60c8ff;
  --color-brandSecondary-400: #48bcff;
  --color-brandSecondary-500: #3eb0fd;
  --color-brandSecondary-600: #3ba1ee;
  --color-brandSecondary-700: #378ed9;
  --color-brandSecondary-800: #337dc5;
  --color-brandSecondary-900: #2c5ca2;

  /* Gray */
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-black: #000000;

  /* Blue */
  --color-blue-50: #e3f2fd;
  --color-blue-100: #bbdefb;
  --color-blue-200: #90caf9;
  --color-blue-300: #64b5f6;
  --color-blue-400: #42a5f5;
  --color-blue-500: #2196f3;
  --color-blue-600: #1e88e5;
  --color-blue-700: #1976d2;
  --color-blue-800: #1565c0;
  --color-blue-900: #0d47a1;

  /* Yellow */
  --color-yellow-50: #fffde7;
  --color-yellow-100: #fff9c4;
  --color-yellow-200: #fff59d;
  --color-yellow-300: #fff176;
  --color-yellow-400: #ffee58;
  --color-yellow-500: #ffeb3b;
  --color-yellow-600: #fdd835;
  --color-yellow-700: #fbc02d;
  --color-yellow-800: #f9a825;
  --color-yellow-900: #f57f17;

  /* Red */
  --color-red-50: #ffebee;
  --color-red-100: #ffcdd2;
  --color-red-200: #ef9a9a;
  --color-red-300: #e57373;
  --color-red-400: #ef5350;
  --color-red-500: #f44336;
  --color-red-600: #e53935;
  --color-red-700: #d32f2f;
  --color-red-800: #c62828;
  --color-red-900: #b71c1c;

  /* Green */
  --color-green-50: #e8f5e9;
  --color-green-100: #c8e6c9;
  --color-green-200: #a5d6a7;
  --color-green-300: #81c784;
  --color-green-400: #66bb6a;
  --color-green-500: #4caf50;
  --color-green-600: #43a047;
  --color-green-700: #388e3c;
  --color-green-800: #2e7d32;
  --color-green-900: #1b5e20;

  /* Accent */
  --color-accent-50: #ffeaed;
  --color-accent-100: #ffcbce;
  --color-accent-200: #f99691;
  --color-accent-300: #f16c66;
  --color-accent-400: #fb483d;
  --color-accent-500: #ff351a;
  --color-accent-600: #f0271c;
  --color-accent-700: #ed002d;
  --color-accent-800: #d2080e;
  --color-accent-900: #c40000;

  /* Point */
  --color-point-50: #f5e5f8;
  --color-point-100: #e5beef;
  --color-point-200: #d592e6;
  --color-point-300: #c365dc;
  --color-point-400: #b63fd4;
  --color-point-500: #a80ccb;
  --color-point-600: #980dc5;
  --color-point-700: #820abe;
  --color-point-800: #6e07b7;
  --color-point-900: #4504ae;

  /* Font Size */
  --fontSize-12: 12px;
  --fontSize-14: 14px;
  --fontSize-16: 16px;
  --fontSize-18: 18px;
  --fontSize-20: 20px;
  --fontSize-24: 24px;
  --fontSize-28: 28px;
  --fontSize-32: 32px;
  --fontSize-40: 40px;
  --fontSize-48: 48px;

  /* Font Weight */
  --fontWeight-300: 300;
  --fontWeight-400: 400;
  --fontWeight-500: 500;
  --fontWeight-600: 600;
  --fontWeight-700: 700;

  /* Space (4px scale) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-52: 52px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;

  /* Radius */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-32: 32px;
  --radius-full: 9999px;
}