/* =========================================================
   Wanted Design System — tokens
   원본: 디자인 패키지 colors_and_type.css
   변경점: 다크모드 셀렉터에 [data-bs-theme="dark"] 추가
   (이 프로젝트는 Bootstrap 의 data-bs-theme 로 다크모드를 관리)
   ========================================================= */

/* ---------- Font face (Pretendard JP via CDN) ---------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap");

:root {
  /* Font stacks */
  --font-sans: "Pretendard JP", "Pretendard", "Noto Sans KR", -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ===========================================================
   ATOMIC COLOR SCALE
   =========================================================== */
:root {
  /* Primary blue (Wanted's signature) */
  --blue-10: rgb(0, 21, 54);
  --blue-20: rgb(0, 41, 102);
  --blue-30: rgb(0, 62, 156);
  --blue-40: rgb(0, 84, 209);
  --blue-45: rgb(0, 94, 235);
  --blue-50: rgb(0, 102, 255); /* PRIMARY */
  --blue-55: rgb(26, 117, 255);
  --blue-60: rgb(51, 133, 255);
  --blue-65: rgb(79, 149, 255);
  --blue-70: rgb(105, 165, 255);
  --blue-80: rgb(158, 197, 255);
  --blue-90: rgb(201, 222, 254);
  --blue-95: rgb(234, 242, 254);
  --blue-99: rgb(247, 251, 255);

  /* Cool neutral */
  --cool-neutral-5: rgb(15, 15, 16);
  --cool-neutral-7: rgb(20, 20, 21);
  --cool-neutral-10: rgb(23, 23, 25);
  --cool-neutral-15: rgb(27, 28, 30);
  --cool-neutral-17: rgb(33, 34, 37);
  --cool-neutral-20: rgb(41, 42, 45);
  --cool-neutral-22: rgb(46, 47, 51);
  --cool-neutral-25: rgb(55, 56, 60);
  --cool-neutral-30: rgb(70, 71, 76);
  --cool-neutral-40: rgb(90, 92, 99);
  --cool-neutral-50: rgb(112, 115, 124);
  --cool-neutral-60: rgb(135, 138, 147);
  --cool-neutral-70: rgb(152, 155, 162);
  --cool-neutral-80: rgb(174, 176, 182);
  --cool-neutral-90: rgb(194, 196, 200);
  --cool-neutral-95: rgb(219, 220, 223);
  --cool-neutral-96: rgb(225, 226, 228);
  --cool-neutral-97: rgb(234, 235, 236);
  --cool-neutral-98: rgb(244, 244, 245);
  --cool-neutral-99: rgb(247, 247, 248);

  /* Status / accent */
  --green-40: rgb(0, 150, 50);
  --green-50: rgb(0, 191, 64);
  --green-60: rgb(30, 212, 90);
  --green-95: rgb(217, 255, 230);

  --red-40: rgb(229, 34, 34);
  --red-50: rgb(255, 66, 66);
  --red-60: rgb(255, 99, 99);
  --red-95: rgb(254, 236, 236);

  --orange-40: rgb(212, 120, 0);
  --orange-50: rgb(255, 146, 0);
  --orange-60: rgb(255, 169, 56);
  --orange-95: rgb(254, 244, 230);

  --cyan-40: rgb(0, 152, 178);
  --cyan-50: rgb(0, 189, 222);
  --cyan-60: rgb(40, 208, 237);

  --violet-45: rgb(91, 55, 237);
  --violet-50: rgb(101, 65, 242);
  --violet-60: rgb(125, 94, 247);
  --violet-95: rgb(240, 236, 254);

  --purple-40: rgb(173, 54, 227);
  --purple-50: rgb(203, 89, 255);
  --purple-60: rgb(212, 120, 255);

  --pink-46: rgb(232, 70, 205);
  --pink-50: rgb(245, 83, 218);
  --pink-60: rgb(250, 115, 227);

  --light-blue-40: rgb(0, 141, 207);
  --light-blue-50: rgb(0, 174, 255);
  --light-blue-60: rgb(61, 194, 255);

  --lime-37: rgb(66, 158, 0);
  --lime-50: rgb(88, 207, 4);
  --lime-60: rgb(107, 224, 22);

  --red-orange-48: rgb(245, 90, 0);
  --red-orange-50: rgb(255, 94, 0);
  --red-orange-60: rgb(255, 123, 46);

  --common-0: rgb(0, 0, 0);
  --common-100: rgb(255, 255, 255);
}

/* ===========================================================
   SEMANTIC COLOR TOKENS — LIGHT (default)
   =========================================================== */
:root {
  /* Backgrounds */
  --bg-normal: var(--common-100);
  --bg-alternative: var(--cool-neutral-99);
  --bg-elevated-normal: var(--common-100);
  --bg-elevated-alternative: var(--cool-neutral-99);
  --bg-transparent-normal: rgba(255, 255, 255, 0.7);
  --bg-transparent-alt: rgba(255, 255, 255, 0.28);

  /* Labels */
  --label-normal: rgb(23, 23, 25);
  --label-strong: var(--common-0);
  --label-neutral: rgba(46, 47, 51, 0.88);
  --label-alternative: rgba(55, 56, 60, 0.61);
  --label-assistive: rgba(55, 56, 60, 0.28);
  --label-disable: rgba(55, 56, 60, 0.16);

  /* Fills */
  --fill-alternative: rgba(112, 115, 124, 0.05);
  --fill-normal: rgba(112, 115, 124, 0.08);
  --fill-strong: rgba(112, 115, 124, 0.16);

  /* Lines */
  --line-alternative: rgba(112, 115, 124, 0.08);
  --line-neutral: rgba(112, 115, 124, 0.16);
  --line-normal: rgba(112, 115, 124, 0.22);
  --line-strong: rgba(112, 115, 124, 0.52);
  --line-solid-alternative: var(--cool-neutral-98);
  --line-solid-neutral: var(--cool-neutral-97);
  --line-solid-normal: var(--cool-neutral-96);
  --line-solid-strong: var(--cool-neutral-80);

  /* Primary */
  --primary-normal: var(--blue-50);
  --primary-strong: var(--blue-45);
  --primary-heavy: var(--blue-40);

  /* Inverse */
  --inverse-background: var(--cool-neutral-15);
  --inverse-label: var(--cool-neutral-99);
  --inverse-primary: var(--blue-60);

  /* Interaction */
  --interaction-disable: var(--cool-neutral-98);
  --interaction-inactive: var(--cool-neutral-70);

  /* Status */
  --status-positive: var(--green-50);
  --status-cautionary: var(--orange-50);
  --status-negative: var(--red-50);

  /* Static */
  --static-white: var(--common-100);
  --static-black: var(--common-0);

  /* Material */
  --material-dimmer: rgba(23, 23, 25, 0.52);
}

/* ===========================================================
   SEMANTIC COLOR TOKENS — DARK
   Bootstrap 의 data-bs-theme="dark" 와 동기화
   =========================================================== */
:root[data-theme="dark"],
:root[data-bs-theme="dark"],
.dark {
  --bg-normal: var(--cool-neutral-15);
  --bg-alternative: var(--cool-neutral-5);
  --bg-elevated-normal: var(--cool-neutral-17);
  --bg-elevated-alternative: var(--cool-neutral-7);
  --bg-transparent-normal: rgba(33, 34, 37, 0.61);
  --bg-transparent-alt: rgba(33, 34, 37, 0.61);

  --label-normal: var(--cool-neutral-99);
  --label-strong: var(--common-100);
  --label-neutral: rgba(194, 196, 200, 0.88);
  --label-alternative: rgba(174, 176, 182, 0.61);
  --label-assistive: rgba(174, 176, 182, 0.28);
  --label-disable: rgba(152, 155, 162, 0.16);

  --fill-alternative: rgba(112, 115, 124, 0.12);
  --fill-normal: rgba(112, 115, 124, 0.22);
  --fill-strong: rgba(112, 115, 124, 0.28);

  --line-alternative: rgba(112, 115, 124, 0.22);
  --line-neutral: rgba(112, 115, 124, 0.28);
  --line-normal: rgba(112, 115, 124, 0.32);
  --line-strong: rgba(194, 196, 200, 0.52);
  --line-solid-alternative: var(--cool-neutral-22);
  --line-solid-neutral: rgb(51, 52, 56);
  --line-solid-normal: var(--cool-neutral-25);
  --line-solid-strong: var(--cool-neutral-50);

  --primary-normal: var(--blue-60);
  --primary-strong: var(--blue-55);
  --primary-heavy: var(--blue-50);

  --inverse-background: var(--common-100);
  --inverse-label: var(--cool-neutral-10);
  --inverse-primary: var(--blue-50);

  --interaction-disable: var(--cool-neutral-22);
  --interaction-inactive: var(--cool-neutral-40);

  --status-positive: var(--green-60);
  --status-cautionary: var(--orange-60);
  --status-negative: var(--red-60);

  --material-dimmer: rgba(23, 23, 25, 0.74);
}

/* ===========================================================
   SPACING, RADII, LAYOUT
   =========================================================== */
:root {
  /* Platform margins */
  --margin-platform: 20px;
  --margin-content: 20px;
  --margin-nav-h: 16px;
  --margin-nav-v: 20px;
  --margin-action-h: 20px;
  --margin-action-v: 20px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius: var(--radius-lg);

  /* Layout */
  --width-min: 320px;
  --width-normal: 400px;
  --width-max: 1060px;
  --width-viewport-lg: 1100px;
  --width-viewport-xl: 1440px;

  /* Gaps */
  --gap-2: 2px;
  --gap-4: 4px;
  --gap-6: 6px;
  --gap-8: 8px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-32: 32px;

  /* Shadows */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-text-protect: 0 0 12px rgba(0, 0, 0, 0.16);
  --shadow-fab: 0 6px 20px rgba(0, 102, 255, 0.32);
}

/* ===========================================================
   TYPOGRAPHY
   =========================================================== */
:root {
  --type-display-lg: 700 56px/1.15 var(--font-sans);
  --type-display: 700 40px/1.2 var(--font-sans);
  --type-h1: 700 32px/1.25 var(--font-sans);
  --type-h2: 700 24px/1.33 var(--font-sans);
  --type-h3: 700 20px/1.4 var(--font-sans);
  --type-h4: 700 18px/1.44 var(--font-sans);

  --type-body-lg: 500 16px/1.5 var(--font-sans);
  --type-body: 500 14px/1.43 var(--font-sans);
  --type-body-sm: 500 13px/1.385 var(--font-sans);
  --type-caption: 500 12px/1.334 var(--font-sans);
  --type-micro: 500 11px/1.36 var(--font-sans);

  --type-button-lg: 700 16px/1.5 var(--font-sans);
  --type-button: 700 14px/1.43 var(--font-sans);
  --type-button-sm: 700 13px/1.385 var(--font-sans);

  --tracking-display: -0.022em;
  --tracking-h: -0.006em;
  --tracking-body: 0.006em;
  --tracking-body-sm: 0.019em;
  --tracking-caption: 0.025em;
}

/* Body 기본 폰트 / 색은 wanted-bridge.css 의 --bs-* 매핑으로 처리 */

.t-display-lg { font: var(--type-display-lg); letter-spacing: var(--tracking-display); }
.t-display    { font: var(--type-display);    letter-spacing: var(--tracking-display); }
.t-h1         { font: var(--type-h1);         letter-spacing: var(--tracking-h); }
.t-h2         { font: var(--type-h2);         letter-spacing: var(--tracking-h); }
.t-h3         { font: var(--type-h3);         letter-spacing: var(--tracking-h); }
.t-h4         { font: var(--type-h4);         letter-spacing: var(--tracking-h); }
.t-body-lg    { font: var(--type-body-lg);    letter-spacing: var(--tracking-body); }
.t-body       { font: var(--type-body);       letter-spacing: var(--tracking-body); }
.t-body-sm    { font: var(--type-body-sm);    letter-spacing: var(--tracking-body-sm); }
.t-caption    { font: var(--type-caption);    letter-spacing: var(--tracking-caption); }
.t-micro      { font: var(--type-micro);      letter-spacing: var(--tracking-caption); }
.t-button-lg  { font: var(--type-button-lg);  letter-spacing: var(--tracking-body); }
.t-button     { font: var(--type-button);     letter-spacing: var(--tracking-body); }
.t-button-sm  { font: var(--type-button-sm);  letter-spacing: var(--tracking-body-sm); }

/* Convenience color utility classes */
.c-fg          { color: var(--label-normal); }
.c-fg-neutral  { color: var(--label-neutral); }
.c-fg-alt      { color: var(--label-alternative); }
.c-fg-assistive{ color: var(--label-assistive); }
.c-fg-disabled { color: var(--label-disable); }
.c-fg-primary  { color: var(--primary-normal); }
.c-fg-inverse  { color: var(--inverse-label); }
.c-bg-page     { background: var(--bg-normal); }
.c-bg-alt      { background: var(--bg-alternative); }
.c-bg-elevated { background: var(--bg-elevated-normal); }
.c-bg-fill     { background: var(--fill-normal); }