/* ==========================================
   TOKENS — 디자인 토큰 (Design Tokens)
   ========================================== */

:root {

  /* Gray Scale */
  --neutral-50:  #f9f9f9;
  --neutral-100: #f2f2f2;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0d0d0d;

  /* Brand */
  --brand-blue:       #0056d2;
  --brand-light-blue: #e6f0ff;
  --brand-orange:     #ff4200;
  --brand-green:      #15a749;
  --brand-red:        #ff0000;

  /* Effect */
  --shadow-card:      0px 3px 0px 0px #00000008;
  --shadow-icon-blue: 6px 6px 10px 0px #d8e7ff;
  --shadow-tab-blue:  2px -2px 4px 0px #0056d233;

  /* Border Radius */
  --radius-s:    4px;
  --radius-m:    6px;
  --radius-l:    8px;
  --radius-xl:   16px;
  --radius-full: 50%;

  /* Font Family */
  --font-family-base: "Pretendard Variable", sans-serif;

  /* Font Size */
  --fs-xs:  12px;   /* caption */
  --fs-sm:  14px;   /* body 2 */
  --fs-md:  16px;   /* body 1, h5 */
  --fs-lg:  20px;   /* h3, h4 */
  --fs-xl:  24px;   /* h2 */
  --fs-2xl: 30px;   /* h1-semi */
  --fs-3xl: 32px;   /* h1 */

  /* Font Weight */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line Height */
  --lh-tight:   130%;  /* caption */
  --lh-normal:  140%;  /* heading, body 2 */
  --lh-relaxed: 150%;  /* body 1 */

  /* Icon Size */
  --icon-size-s: 16px;
  --icon-size-m: 24px;
  --icon-size-l: 32px;

  /* State — hover/pressed용 */
  --state-hover:   rgba(0, 0, 0, 0.04);
  --state-pressed: rgba(0, 0, 0, 0.08);

  /* Transition Duration */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;

  /* Spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;
}