/* ============================================================
   Glow Design System — Tokens (Colors, Type, Spacing)
   ============================================================
   디자인 토큰 단일 진실. 폰트 @font-face는 fonts.css 분리.
   .glow-v2 스코프 reset/base는 glow-v2.css 분리. */

:root {
  /* ---------- Brand ---------- */
  --brand-500: rgb(156, 101, 255);   /* primary purple */
  --brand-400: rgb(198, 167, 255);   /* purple light */
  --brand-700: rgb(131, 77, 224);    /* purple deep */
  --brand-50:  rgb(245, 240, 255);   /* purple wash / soft bg */
  --brand-100: rgb(244, 237, 247);   /* lavender mist */

  /* ---------- CRM Global Colors / Gray (canonical scale) ---------- */
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #1E1B4B;

  /* Semantic foreground aliases (mapped onto the gray scale) */
  --fg-1: var(--gray-900);  /* primary text — indigo-near-black */
  --fg-2: var(--gray-600);  /* body */
  --fg-3: var(--gray-500);  /* secondary / meta */
  --fg-4: var(--gray-400);  /* muted / placeholder */
  --fg-5: var(--gray-300);  /* disabled */

  /* ---------- Surface / Background ---------- */
  --bg-app:    rgb(248, 250, 252);  /* canvas */
  --bg-card:   rgb(255, 255, 255);  /* cards */
  --bg-subtle: rgb(241, 245, 249);  /* table headers, chips */
  --bg-hover:  rgb(248, 250, 252);

  /* ---------- Borders ---------- */
  --border-1: rgb(226, 232, 240);   /* default 1px */
  --border-2: rgb(203, 213, 225);   /* stronger */

  /* ---------- Semantic accents (each with soft tint) ---------- */
  --accent-pink:    rgb(244, 114, 182);
  --accent-pink-50: rgb(253, 242, 248);
  --accent-amber:   rgb(251, 191, 36);
  --accent-amber-50:rgb(255, 251, 235);
  --accent-blue:    rgb(96, 165, 250);
  --accent-blue-50: rgb(239, 246, 255);
  --accent-green:   rgb(34, 197, 94);
  --accent-green-50:rgb(245, 252, 241);
  --accent-rose:    rgb(247, 237, 237);  /* peachy beige fill */
  --accent-cream:   rgb(247, 247, 232);
  --accent-sand:    rgb(251, 244, 236);

  /* ---------- Status ---------- */
  --danger-500: rgb(239, 68, 68);
  --danger-50:  rgb(254, 242, 242);
  --warn-500:   rgb(251, 191, 36);
  --warn-50:    rgb(255, 251, 235);
  --info-500:   rgb(73, 118, 244);
  --info-50:    rgb(239, 246, 255);
  --ok-500:     rgb(34, 197, 94);
  --ok-50:      rgb(245, 252, 241);

  /* ---------- Shadows (subtle, layered) ---------- */
  --shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.04);
  --shadow-md: 0 1px 2px rgba(31, 31, 31, 0.04), 0 4px 8px rgba(31, 31, 31, 0.04);
  --shadow-lg: 0 4px 12px rgba(31, 31, 31, 0.06), 0 12px 32px rgba(31, 31, 31, 0.04);
  --shadow-pop: 0 8px 24px rgba(30, 27, 75, 0.08);

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;     /* buttons, inputs, sidebar items */
  --r-lg: 12px;
  --r-xl: 16px;    /* cards */
  --r-pill: 999px;

  /* ---------- Spacing scale (4-based) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---------- Type ---------- */
  --font-sans: 'Pretendard', 'Pretendard Variable', -apple-system,
               BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR',
               system-ui, sans-serif;

  /* sizes pulled from Figma usage */
  --fs-9:  9px;
  --fs-12: 12px;
  --fs-13: 13px; /* FEAT-FINANCE-TEXT-SCALE +3px */
  --fs-14: 14px;
  --fs-15: 15px; /* FEAT-FINANCE-TEXT-SCALE +3px */
  --fs-16: 16px;
  --fs-17: 17px; /* FEAT-FINANCE-TEXT-SCALE +3px */
  --fs-18: 18px;
  --fs-19: 19px; /* FEAT-FINANCE-TEXT-SCALE +3px */
  --fs-21: 21px; /* FEAT-FINANCE-TEXT-SCALE +3px */
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-38: 38px;

  /* tracking — design uses -0.010em consistently */
  --tracking: -0.010em;
}