/* GENERATED by scripts/dtcg_emit_css.py — DO NOT EDIT BY HAND.
 * Source of truth: design-system/dtcg/tokens/wizon-ai.tokens.json + wizon-ai.dark.tokens.json
 * Regenerate: python3 scripts/dtcg_emit_css.py --write
 */

:root {
  --wizon-ai-font-family: "Pretendard Variable", -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  --wizon-ai-font-size-micro: 11px;
  --wizon-ai-font-size-caption: 12px;
  --wizon-ai-font-size-label: 13px;
  --wizon-ai-font-size-body: 14px;
  --wizon-ai-font-size-title: 18px;
  --wizon-ai-canvas: #fcfcfc;
  --wizon-ai-surface: #ffffff;
  --wizon-ai-text-primary: #0d0d0d;
  --wizon-ai-text-secondary: #3f3f3f;
  --wizon-ai-text-muted: #6f6f6f;
  --wizon-ai-text-muted-2: #8a8a8a;
  --wizon-ai-sidebar-bg: #f9f9f9;
  --wizon-ai-sidebar-border: #ececec;
  --wizon-ai-sidebar-active-bg: rgba(0, 0, 0, 0.05);
  --wizon-ai-popover-bg: #ffffff;
  --wizon-ai-popover-border: #e3e3e3;
  --wizon-ai-hover-bg: #ececec;
  --wizon-ai-hover-soft-bg: #f4f4f4;
  --wizon-ai-focus-bg: #f3f3f3;
  --wizon-ai-focus-ring: rgba(13, 13, 13, 0.16);
  --wizon-ai-scrollbar-thumb: #c7c7c7;
  --wizon-ai-scrollbar-track: transparent;
  --wizon-ai-message-user-bg: #f4f4f4;
  --wizon-ai-composer-bg: #ffffff;
  --wizon-ai-composer-border: rgba(0, 0, 0, 0.05);
  --wizon-ai-input-placeholder: #8a8a8a;
  --wizon-ai-action-primary-bg: #0d0d0d;
  --wizon-ai-action-primary-bg-hover: #262626;
  --wizon-ai-action-primary-fg: #ffffff;
  --wizon-ai-disabled-bg: #d9d9d9;
  --wizon-ai-danger-text: #ba2623;
  --wizon-ai-danger-bg: #ff002a;
  --wizon-ai-danger-bg-hover: #e50026;
  --wizon-ai-warning-text: #b45309;
  --wizon-ai-space-unit: 4px;
  --wizon-ai-chat-max-width: 800px;
  --wizon-ai-chat-gutter: calc(var(--wizon-ai-space-unit) * 5);
  --wizon-ai-thread-gutter: calc(var(--wizon-ai-space-unit) * 4);
  --wizon-ai-composer-gutter: calc(var(--wizon-ai-space-unit) * 3);
  --wizon-ai-composer-compact-gutter: calc(var(--wizon-ai-space-unit) * 2);
  --wizon-ai-sidebar-row-height: 36px;
  --wizon-ai-sidebar-row-width: 248px;
  --wizon-ai-account-button-width: 246px;
  --wizon-ai-account-button-height: 52px;
  --wizon-ai-account-avatar-bg: #e8f2ff;
  --wizon-ai-account-avatar-fg: #185abc;
  --wizon-ai-account-menu-width: calc(var(--wizon-ai-space-unit) * 62);
  --wizon-ai-account-menu-head-height: calc(var(--wizon-ai-space-unit) * 12.75);
  --wizon-ai-search-dialog-width: 680px;
  --wizon-ai-search-dialog-height: 442px;
  --wizon-ai-search-row-height: 44px;
  --wizon-ai-menu-row-height: 36px;
  --wizon-ai-icon-size-md: 20px;
  --wizon-ai-action-target-xs: 24px;
  --wizon-ai-action-target-sm: 32px;
  --wizon-ai-action-target-lg: 56px;
  --wizon-ai-login-surface-padding: var(--wds-space-8);
  --wizon-ai-login-surface-gap: var(--wds-space-6);
  --wizon-ai-login-header-gap: var(--wds-space-3);
  --wizon-ai-login-body-gap: var(--wds-space-5);
  --wizon-ai-login-actions-gap: var(--wds-space-5);
  --wizon-ai-login-field-gap: var(--wds-space-3);
  --wizon-ai-login-backdrop-bg: color-mix(in srgb, var(--wizon-ai-canvas, #fcfcfc) 92%, #0d0d0d 8%);
  --wizon-ai-login-surface-border: rgba(0, 0, 0, 0.08);
  --wizon-ai-login-link-fg: var(--wizon-ai-text-primary);
  --wizon-ai-login-link-hover-fg: var(--wizon-ai-text-primary);
  --wizon-ai-login-help-label-fg: var(--wizon-ai-text-muted);
  --wizon-ai-login-link-font-size: var(--wds-font-size-body-2);
  --wizon-ai-login-link-font-weight: var(--wds-font-weight-regular);
  --wizon-ai-login-link-line-height: 1.4;
  --wizon-ai-login-link-target-height: var(--wds-control-height-md);
  --wizon-ai-login-link-row-gap: var(--wds-space-3);
  --wizon-ai-radius-micro: 3px;
  --wizon-ai-radius-control: 8px;
  --wizon-ai-radius-menu-row: 10px;
  --wizon-ai-radius-popover: 16px;
  --wizon-ai-radius-sheet: 18px;
  --wizon-ai-radius-pill: 999px;
  --wizon-ai-composer-radius: 24px;
  --wizon-ai-menu-gutter: calc(var(--wizon-ai-space-unit) * 1.5);
  --wizon-ai-menu-radius: 12px;
  --wizon-ai-composer-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 80px 8px rgba(0, 0, 0, 0.024);
  --wizon-ai-popover-shadow: 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62);
  --wizon-ai-dialog-shadow: var(--wizon-ai-popover-shadow);
  --wizon-ai-login-surface-shadow: 0 40px 120px rgba(0, 0, 0, 0.22), 0 20px 44px rgba(0, 0, 0, 0.12), 0 5px 18px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --wizon-ai-overlay-panel-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
  --wizon-ai-focus-visible-ring: var(--wizon-ai-focus-ring);
  --wizon-ai-transition-basic-duration: 150ms;
  --wizon-ai-ease-enter: cubic-bezier(0.19, 1, 0.22, 1);
  --wizon-ai-ease-exit: cubic-bezier(0.8, 0, 0.4, 1);
  --wizon-ai-ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --wizon-ai-motion-effect-fast: var(--wds-spring-effect-fast, var(--wds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
  --wizon-ai-motion-effect-ease: var(--wds-spring-effect-default, var(--wds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
  --wizon-ai-motion-spatial-ease: var(--wds-spring-spatial-default, var(--wds-ease-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)));
  --wizon-ai-motion-micro-duration: var(--wds-spring-effect-fast-duration, 124ms);
  --wizon-ai-motion-surface-duration: var(--wds-spring-effect-default-duration, 188ms);
  --wizon-ai-motion-panel-duration: var(--wds-spring-spatial-default-duration, 372ms);
  --wizon-ai-message-enter-duration: 420ms;
  --wizon-ai-message-action-delay: 92ms;
  --wizon-sheet-exit-ms: 300ms;
  --wizon-sheet-exit-ease: var(--wds-spring-effect-default, cubic-bezier(0.33, 0, 0.2, 1));
  --wizon-scrim: rgba(0, 0, 0, 0.24);
  --wizon-motion-fast: 140ms;
  --wizon-motion-base: 240ms;
  --wizon-adaptive-right-panel-width: 380px;
  --wizon-safe-top: env(safe-area-inset-top, 0px);
  --wizon-safe-bottom: env(safe-area-inset-bottom, 0px);
  --wizon-safe-left: env(safe-area-inset-left, 0px);
  --wizon-safe-right: env(safe-area-inset-right, 0px);
}
[data-theme="dark"] {
  --wizon-ai-canvas: #000000;
  --wizon-ai-surface: #000000;
  --wizon-ai-text-primary: #ececec;
  --wizon-ai-text-secondary: #e3e3e3;
  --wizon-ai-text-muted: #b4b4b4;
  --wizon-ai-text-muted-2: #8b8b8b;
  --wizon-ai-sidebar-bg: #000000;
  --wizon-ai-sidebar-border: #242424;
  --wizon-ai-sidebar-active-bg: #1f1f1f;
  --wizon-ai-popover-bg: #2f2f2f;
  --wizon-ai-popover-border: #3f3f3f;
  --wizon-ai-hover-bg: #1f1f1f;
  --wizon-ai-hover-soft-bg: #212121;
  --wizon-ai-focus-bg: #2f2f2f;
  --wizon-ai-focus-ring: rgba(255, 255, 255, 0.18);
  --wizon-ai-scrollbar-thumb: #555555;
  --wizon-ai-scrollbar-track: transparent;
  --wizon-ai-message-user-bg: #2f2f2f;
  --wizon-ai-composer-bg: #2f2f2f;
  --wizon-ai-composer-border: #3f3f3f;
  --wizon-ai-input-placeholder: #b4b4b4;
  --wizon-ai-action-primary-bg: #ffffff;
  --wizon-ai-action-primary-bg-hover: #e3e3e3;
  --wizon-ai-action-primary-fg: #000000;
  --wizon-ai-account-avatar-bg: #102a43;
  --wizon-ai-account-avatar-fg: #9cc8ff;
  --wizon-ai-disabled-bg: #676767;
  --wizon-ai-danger-text: #ff6b5f;
  --wizon-ai-danger-bg: #ff2f4f;
  --wizon-ai-danger-bg-hover: #ff4260;
  --wizon-ai-warning-text: #f59e0b;
  --wizon-ai-login-backdrop-bg: color-mix(in srgb, var(--wizon-ai-canvas, #151515) 86%, #ffffff 14%);
  --wizon-ai-login-surface-border: rgba(255, 255, 255, 0.16);
  --wizon-ai-composer-shadow: none;
  --wizon-ai-popover-shadow: 0 8px 12px rgba(0, 0, 0, 0.36), 0 0 1px rgba(255, 255, 255, 0.28);
  --wizon-ai-dialog-shadow: var(--wizon-ai-popover-shadow);
  --wizon-ai-login-surface-shadow: 0 40px 120px rgba(0, 0, 0, 0.72), 0 20px 44px rgba(0, 0, 0, 0.52), 0 5px 18px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Non-token binding residue appended verbatim by the emitter (T-3 drop-in). Hand-maintained. */

[data-product="wizon-ai"] {
  --wds-ai-shell-canvas: var(--wizon-ai-canvas);
  --wds-ai-shell-sidebar-surface: var(--wizon-ai-sidebar-bg);
  --wds-ai-shell-composer-surface: var(--wizon-ai-composer-bg);
  --wds-ai-shell-message-user-surface: var(--wizon-ai-message-user-bg);
  --wds-ai-shell-popover-surface: var(--wizon-ai-popover-bg);
  --wds-ai-shell-action-primary-bg: var(--wizon-ai-action-primary-bg);
  --wds-ai-shell-action-primary-bg-hover: var(--wizon-ai-action-primary-bg);
  --wds-ai-shell-action-primary-bg-active: var(--wizon-ai-action-primary-bg);
  --wds-ai-shell-action-primary-fg: var(--wizon-ai-action-primary-fg);
  --wds-ai-shell-motion-panel: var(--wizon-ai-motion-spatial-ease);
  --wds-ai-shell-motion-panel-duration: var(--wizon-ai-motion-panel-duration);
}

/* WDS 컴포넌트 → 위즈온 토큰 바인딩 (설정 다이얼로그 범위).
   설정 화면의 셀렉트·드롭다운 메뉴는 WDS Select / DropdownMenu 컴포넌트를 그대로
   쓴다. 위즈온 브랜드 색이 아직 WDS에 반영되지 않아 여기서 **색상 토큰만** 위즈온
   값으로 바인딩한다(기본 WDS는 파랑 계열, 위즈온은 잉크 모노톤).

   ★형태(geometry) 토큰은 절대 덮지 않는다 — radius/height/shadow를 위즈온 값으로
   바꾸면 모서리·높이가 WDS 문서와 어긋나 "WDS 컴포넌트"가 아니게 된다.
   (2026-07-21 실측: input-radius 10px→8px, radius-md 10px→18px로 덮어 모양이 틀어졌다.)

   이 파일은 wds/ui-web/styles.css 뒤에 로드되므로 오버라이드가 적용되고, 값이 모두
   --wizon-ai-* 참조라 라이트·다크는 위즈온 토큰이 알아서 재바인딩된다. */
#settingsV2Dialog,
#settingsV2PasskeyNudge {
  /* WDS Button은 색을 컴포넌트 토큰(--wds-button-*)에서 읽는다 — --wds-color-primary만
     묶으면 primary 버튼이 WDS 기본 파랑으로 남는다(2026-07-21 실측). */
  --wds-button-bg: var(--wizon-ai-action-primary-bg);
  --wds-button-fg: var(--wizon-ai-action-primary-fg);
  --wds-button-bg-hover: var(--wizon-ai-action-primary-bg);
  --wds-button-bg-active: var(--wizon-ai-action-primary-bg);
  --wds-button-bg-disabled: var(--wizon-ai-disabled-bg);
  --wds-button-fg-disabled: var(--wizon-ai-text-muted);
  --wds-color-focus-ring: var(--wizon-ai-focus-ring);
  --wds-color-primary: var(--wizon-ai-action-primary-bg);
  --wds-color-primary-text: var(--wizon-ai-text-primary);
  --wds-color-text: var(--wizon-ai-text-primary);
  --wds-color-text-subtle: var(--wizon-ai-text-muted);
  --wds-color-text-placeholder: var(--wizon-ai-input-placeholder);
  --wds-color-surface-raised: var(--wizon-ai-surface);
  --wds-color-surface-hover: var(--wizon-ai-hover-bg);
  --wds-color-surface-pressed: var(--wizon-ai-hover-bg);
  --wds-color-surface-selected: var(--wizon-ai-hover-soft-bg);
  --wds-color-border: var(--wizon-ai-popover-border);
  --wds-input-bg: var(--wizon-ai-surface);
  --wds-input-fg: var(--wizon-ai-text-primary);
  --wds-input-border: var(--wizon-ai-popover-border);
  --wds-input-border-focus: var(--wizon-ai-focus-ring);
  --wds-input-placeholder: var(--wizon-ai-input-placeholder);
  --wds-input-bg-disabled: var(--wizon-ai-disabled-bg);
  /* WDS Alert도 색을 컴포넌트 토큰에서 읽는다 — 묶지 않으면 배지가 WDS 기본색으로
     남는다(Button에서 겪은 것과 같은 함정). 잉크 모노톤이라 info 배지는 본문 잉크,
     error 배지는 위험 잉크로 채운다. 배지 안 글리프는 --wds-color-surface를 쓰므로
     어두운 배지 위에서 밝게 반전된다. */
  --wds-alert-surface: var(--wizon-ai-hover-soft-bg);
  --wds-alert-border: var(--wizon-ai-sidebar-border);
  --wds-color-info-text: var(--wizon-ai-text-primary);
  --wds-color-error-text: var(--wizon-ai-danger-text);
  --wds-color-text-muted: var(--wizon-ai-text-secondary);
  --wds-color-surface: var(--wizon-ai-surface);
  /* WDS Toast — 성공 아이콘은 잉크 모노톤이라 별도 초록이 아니라 본문 잉크로 읽힌다.
     (진행 중 토스트는 WDS 변형에 없어 기본 muted 색을 그대로 쓴다.) */
  --wds-toast-surface: var(--wizon-ai-surface);
  --wds-toast-border: var(--wizon-ai-popover-border);
  --wds-color-success-text: var(--wizon-ai-text-primary);
}